无法在 div 中添加 <br />

Question

我正在尝试使用 jQuery 在运行时添加多个 div。我想添加 3 个属于同一类的 div，然后添加换行符，这样当用户再次单击“添加框”按钮时，我可以在下一行再显示 3 个 div。

这是相同的 jsFiddle：http://jsfiddle.net/WjFCf/3/

正如您在 jsFiddle 中看到的那样，它几乎可以执行所有操作，但不会在第 3 个 div 之后添加换行符。因此，当用户再次单击该按钮时，它只会在同一行中添加更多 div。

有人可以帮我解决这个问题吗？

Answer 1

我想你想clear它。

http://jsfiddle.net/WjFCf/4/

注意 CSS 的变化。

Answer 2

正在添加您的换行符，问题是框上的float: left。如果您将其更改为 display: inline-block，您将获得您正在寻找的结果。

Answer 3

您将让下一行框具有clear:both 属性，以便它们位于上方的浮动框下方。

http://jsfiddle.net/WjFCf/5/

Answer 4

如果您将箱子放入（足够）固定宽度的容器中，它将确保它们正确地分成三组。

就目前而言，如果窗口变得太小，“多余”的 div 将掉到下一行。

见http://jsfiddle.net/alnitak/ZbPxG/

Answer 5

当我将此代码添加到您的代码时，它运行良好：

#boxes{
   width: 600px;
}

Answer 6

<br> 不会自行有效地将 div 向下推。

使用clear 属性会更有效。这告诉浏览器停止关注之前的向左（或向右）浮动，并开始一个新的浮动区域。

jsfiddle