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框架，可实现各种布局。