读书人

3列浮动布局为啥要嵌套两层

发布时间: 2013-02-19 11:11:40 作者: rapoo

三列浮动布局为啥要嵌套两层?
摘自《精通css》8.3.2节——


<div class="content">
<div class="primary">
<div class="primary">
<-- your primary primary content goes here -->
</div>
<div class="secondary">
<-- your secondary primary content goes here -->
</div>
</div>
<div class="secondary”>
<!--navigation and secondary content goes here -->
</div>
</div>


我觉得这2层嵌套有点多余,似乎直接将两个div向左浮动,再将剩下的那个div向右浮动就行了,如下——

<div class="content">
<div class="left_one"></div>
<div class="left_two"></div>
<div class="right"></div>
</div>

[解决办法]
如果有需求改变比如 left_one 和 left_two 位置需要互换,那么按照LZ的写法则需要修改结构,要修改HTML,而上面的写法只需要修改CSS即可,如 .primary .primary{float:right;} 就可以实现第一栏和第二栏位置互换。
[解决办法]
浏览器不兼容

左左右浮动,IE6很容易最右边那个掉到下面去
[解决办法]
首先 你的方案是可以的。
但是 根据习惯 ,我们在布局两列的时候 ,一般都是左右浮动结合使用。所以如果添加布局三列的话,当然可以把其中的一列 也按照左右浮动设置,这样就形成统一了,样式也达到了复用性。
[解决办法]
我认为想怎么写都行

读书人网 >CSS

热点推荐