求助一个简单的css布局效果

o0风箫吟0o 2018-07-18 04:49:07

我想实现一个简单的css布局效果，如下图所示：

说明文字多少不固定。

我是新手，这么一个简单的效果我居然半天没搞定，所以请教热心人。

...全文

126 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

o0风箫吟0o 2018-07-18

打赏
举报

谢谢大侠！！新手要加强学习了。

天际的海浪 2018-07-18

打赏
举报

引用 2 楼 eepcvfp 的回复:

[quote=引用 1 楼 jslang 的回复:]



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

div {

	font-size: 30px;

	padding-left: 3em;

	text-indent:-3em;

}

</style>

</head>

<body>



<div>

说明：说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字

</div>

</body>

</html>

谢谢大侠出手。

再追问一下：
能不能实现“说明：”两个字与后面的“说明的文字……”内容放在两个标签里呢？您的方案是放在一个<div>里的。[/quote]
你随便放啊
<div>
<span>说明：</span><span>说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字</span>
</div>

o0风箫吟0o 2018-07-18

打赏
举报

引用 1 楼 jslang 的回复:



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

div {

	font-size: 30px;

	padding-left: 3em;

	text-indent:-3em;

}

</style>

</head>

<body>



<div>

说明：说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字

</div>

</body>

</html>

谢谢大侠出手。

再追问一下：
能不能实现“说明：”两个字与后面的“说明的文字……”内容放在两个标签里呢？您的方案是放在一个<div>里的。

天际的海浪 2018-07-18

打赏
举报



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

div {

	font-size: 30px;

	padding-left: 3em;

	text-indent:-3em;

}

</style>

</head>

<body>



<div>

说明：说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字说明的文字

</div>

</body>

</html>