如何强制inline-block的元素来包装？ [英] How to force inline-block elements to wrap?

问题描述

我有一个inline-block的DIV。

I have an inline-block div.

.element {
display: inline-block;
}

我使用jQuery一再追加到DOM。

I use jquery to repeatedly append it to the DOM.

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

但是附加的div不换行。这是因为如果我有以下加价（不换行）

However the appended divs do not wrap. It is as if I had the following mark-up (no newlines)

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

追加空白插图中的元素没有解决的问题：

Appending whitespace inbetween the elements does not fix problem:

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

我怎么可以强制这些元素来包装？ （我不希望使用浮点数）。

How can I force these elements to wrap? (I do not want to use floats).

推荐答案

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

If they are simply div elements set to inline-block they should wrap like so: http://jsfiddle.net/72cYy/

检查并确保它们的容器/父元素没有一个空格：NOWRAP 。这会导致他们不换行。

Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.

这篇关于如何强制inline-block的元素来包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！