CSS:怎么用positioning和float,把文字格式弄成图中这样??谢谢啦...

发布网友 发布时间：2024-10-24 05:32

我来回答

共2个回答

热心网友 时间：2024-11-05 23:38

css3可以直接弄这个效果（可惜很多浏览器不支持）
css2的话你要把文字弄成如图三栏排版，你不得不把文字分成三段：

css 浮动方法：--------------------------------
<h1>Three Colums of ..</h1>

<div id="mytxt">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>

#mytxt{width:100%;}
#mytxt p{
float:left:
width:25%;
margin:0 5% 0 0;
}

css 定位方法：--------------------------------

<h1>Three Colums of ..</h1>

<div id="mytxt">
<p class="txt1">第一段</p>
<p class="txt2">第二段</p>
<p class="txt3">第三段</p>
</div>

#mytxt{
width:100%;
position:relative;
}

#mytxt p{
width:200px;
position:absolute;top:20px;
}

.txt1{left:15px;}
.txt2{left:215px;}
.txt3{left:415px;}

热心网友 时间：2024-11-05 23:38

div设置float: left和宽度即可
使用position需要手动给left值 当然也可以用js但是麻烦些
较多的是使用jquery的masonry插件