div中的兩列 - 使用哪一個1）浮動沿或2）兩個花車

Question

我有一個容器中的兩個div。一個是左欄，另一個是右欄。我需要一些建議/建議來使用哪種方法。

方法1：

#container{ width:800px; margin:0 auto;} 
#leftbar{ float:left; width:200px; } 
#rightbar{ float:right: width:550px;} 

方法2：

#container{width:800px; margin:0 auto;} 
#leftbar{ float:left; width:200px; } 
#rightbar{ margin:0 0 0 210px; width:550px;} 

請指點哪一個很好的做法。

Answer 1

被10px的如果你的容器是永遠永遠永遠會是800像素寬度，那麼你使用的兩個選項中的哪一個真的不重要。只需使用每個文件最少字節的文件。

但是，如果您的容器變得大於800像素，您是否希望右側欄粘貼到容器的右側？如果是這樣，只有方法1可以工作。

但是，還有另一種方法可以實現與方法2相同的效果，即將div同時浮動到左側。

Answer 2

從語義上講，自550 + 200〜800像素以來沒有區別，所以你沒有給出任何線索，例如兩個div應該如何做。容器是1000 px。

Answer 3

要麼是好的，但在方法1，你將有一個的div之間出現50px的「陰溝」，而只會在方法2

Answer 4

在這個階段它沒有實際的區別，但更多的面向未來的方法是第一個，因爲它允許您以後更改容器的寬度，而不必更改右邊的CSS來保持它完全正確-aligned。

Answer 5

如果您想要使用一些不需要太多考慮的健壯代碼，那麼您可以使用基於網格的框架，如Yahoo User Interface或960 grid。

兩者都提供簡單易用的CSS/HTML框架，可實現各種佈局。