日期:2014-05-17  浏览次数:20583 次

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