三栏布局中div的先后顺序问题

转载地址:http://blog.csdn.net/wpbfj/article/details/50895317

常用的三栏布局中,用的较多的浮动布局,会因为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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值