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

Question

我有一个内联块 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(" ");

如何强制这些元素换行？（我不想使用花车）。

score 32 · Accepted Answer

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

检查并确保它们的容器/父元素没有white-space:nowrap. 这将导致他们不包装。

score 2 · Accepted Answer

您可以按百分比给出元素宽度。更改与元素数量和包装方式有关的百分比值。

score 0 · Accepted Answer

我建议使用 css 为元素类设置样式以创建空白。如果您不想这样做，您可以随时尝试附加一个不间断的空格。

var element = $("<div class='element' />&nbsp;");

score 0 · Accepted Answer

或者，如果没有使用 ::before 伪元素，您可以利用它的功能来解决这个问题。

element:before { /* single : to support older browsers */
    display:block;
    width:100%;
}

这是内联元素的解决方案

4 回答 4