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

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

查看更多 下一篇