Как заставить встроенные элементы блокировать?

У меня есть встроенный блок div.

.element {
display: inline-block;
}

Я использую jquery для многократного добавления его в DOM.

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

Однако добавленные divs не обертываются. Это как если бы у меня была следующая надбавка (без новой строки)

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

Добавление пробела между элементами не устраняет проблему:

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

Как я могу заставить эти элементы обернуть? (Я не хочу использовать float).

Ответы

Ответ 1

Если это просто div элементы, установленные в inline-block, они должны выглядеть так: http://jsfiddle.net/72cYy/

Проверьте и убедитесь, что у своего контейнера/родительского элемента нет white-space:nowrap. Это заставило бы их не обертывать.

Ответ 2

Вы можете указать ширину элементов в процентах. Измените процентное значение в отношении количества элементов и способа их переноса.

Ответ 3

Я бы рекомендовал стилизовать класс element с помощью css для создания пробела. Если вы не хотите этого делать, вы всегда можете попытаться добавить неиспользуемое пространство.

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

Ответ 4

В качестве альтернативы, если элемент:: before pseudo не используется, вы можете использовать его полномочия для решения этой проблемы.

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

это решение для встроенных элементов