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(" ");

如何强制这些元素换行?(我不想使用花车)。

4

4 回答 4

32

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

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

于 2013-01-23T19:34:47.887 回答
2

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

于 2013-01-23T19:30:59.947 回答
0

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

var element = $("<div class='element' />&nbsp;");
于 2013-01-23T19:27:07.477 回答
0

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

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

这是内联元素的解决方案

于 2015-12-18T16:19:50.263 回答