如何强制行内块元素换行？答案

【问题标题】：How to force inline-block elements to wrap?如何强制行内块元素换行？
【发布时间】：2013-01-23 19:18:20
【问题描述】：

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

如何强制这些元素换行？（我不想使用浮点数）。

【问题讨论】：

为什么不把你的元素变成块（或者让它们实际上是这样，因为这是 div 的默认设置）。内联块很少是一个好主意......也许你应该尝试展示你想要实现的目标，甚至设置一个小小提琴（不需要那里的js，只需使用你的输出，这显然是一个css问题)

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

这是内联元素的解决方案

【讨论】：