如何强制内联块元素换行? [英] How to force inline-block elements to wrap?

问题描述

我有一个内联块 div.

.element {显示:内联块；}

我使用 jquery 反复将其附加到 DOM.

 var 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="元素"></div>

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

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

如何强制这些元素换行?(我不想使用浮点数).

解决方案

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

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

I have an inline-block div.

.element {
display: inline-block;
}

I use jquery to repeatedly append it to the DOM.

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

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).

解决方案

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

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

这篇关于如何强制内联块元素换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！