css - 如何强制行内 block 元素换行？

Question

我有一个内联 block div。

.element {
display: inline-block;
}

我使用 jquery 将其重复附加到 DOM。

  var element = $("<div class='element'>");
  $(body).append(element).append(element).append(element).append(element);

但是附加的 div 不会换行。就好像我有以下标记(没有换行符)

<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>

在元素之间添加空格并不能解决问题:

  $(body).append(element).append(" ");

如何强制这些元素换行？ (我不想使用 float )。

Answer 1

如果它们只是设置为 inline-block 的 div 元素，它们应该像这样换行:http://jsfiddle.net/72cYy/

检查并确保它们的容器/父元素没有 white-space:nowrap。这会导致它们不换行。