关于三栏布局中浮动布局div块的先后顺序

来源:互联网 发布:ps制作淘宝详情页尺寸 编辑:程序博客网 时间:2024/06/06 13:23
常用的三栏布局中,用的较多的浮动布局,会因为div块的先后顺序而产生不同的效果。

这种情况下,一般左右两栏div需要在中间栏之前。这样,才能让左右两个边栏浮动到它们应该的位置上,以此来使得中栏能够进入中间的空间,并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏,那么中栏会先占据一侧或者两侧位置,这样浮动的部分就会跑到中栏的下面。

如下:

<div id="box">
<div id="box-left">
<div id="box-left-left">
<img src="f:/html/001.jpeg" width="80";height="80";>
</div>
<div id="box-left-right">
<p align:center>上理前端分队</p>
</div>
</div>

<div id="box-right">
<div id="box-right-center" ><img src="f:/html/001.jpeg" width="80";height="80";></div>

</div>
<div id="box-center">
<h3 align="center">关于我们</h3>
<p>奋斗不止</p>
</div><!--注意这个中间div块,要放在其他两个div块的后边,不然会错位。-->
<br clear="all" />
</div>

0 0