jquery - 更好的 CSS 方式来排列 div

Question

我必须动态地将子 div 元素添加到#mainHolder div。应该只有三个 div 连续。我正在使用http://jsfiddle.net/Lijo/ZkLg6/20/中所示的“<strong>clear”方法。

有没有更好的 CSS 方法来做到这一点？

参考：

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

Answer 1

你可以添加clear: left;到你的.firstDiv班级。这样您就不需要使用clear:both; Here is an updated JSfiddle 添加另一个 div。

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 * 50 像素。

检查此链接>> http://jsfiddle.net/ZkLg6/24/