无法在div中添加<br/>

Question

我正在尝试使用jQuery在运行时添加多个div。我想添加3个相同类的div然后添加换行符，以便用户点击＆＃34;添加框＆＃34;再次按钮，我可以在下一行显示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

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

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

请参阅http://jsfiddle.net/alnitak/ZbPxG/

Answer 4

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

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

Answer 5

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

#boxes{
   width: 600px;
}

Answer 6

<br>不会有效地降低div的效果。

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

jsfiddle