更好的CSS方式来安排div

Question

我必须动态地将子div元素添加到#mainHolder div。连续应该只有三个div。我使用“清除”方法进行操作，如http://jsfiddle.net/Lijo/ZkLg6/20/所示。

这样做有更好的CSS方法吗？

参考：

1. http://jsfiddle.net/Lijo/bSchQ/9/

Answer 1

您可以将clear: left;添加到.firstDiv课程中。这样您就不需要添加另一个div clear:both; Here是一个更新的JSfiddle。

Answer 2

你应该使用display: inline-block;作为内部div，使它们在一行中共存。

这是你的例子，有点改写，这样做：

http://jsfiddle.net/bSchQ/3/

说明：

• Javascript - 这个部分几乎与你的功能完全相同，但是我把它重写为一个更通用的练习。我将每一行包裹在一个单独的div中以分割它们。

• CSS - 这是重要的部分。假设我举了你的例子并且只删除了float: left。由于display: inline; div仍将在同一行中渲染，但出于同样的原因，它们不能具有尺寸（宽度，高度）。如果您将它们声明为display: inline-block，那么您将获得两全其美的效果。可以水平放置的内联元素，以及可以自行标注的元素。

Answer 3

希望这有助于将位置设置为绝对值，并将盒子的宽度设置为150，例如3 * 50px。

检查此链接＆gt;＆gt; http://jsfiddle.net/ZkLg6/24/