Очистка встроенных блоков?

Ответ 1

Зависит от ваших объявлений CSS и вашей разметки, но вы можете попробовать поместить это объявление CSS в родительский контейнер:

white-space: pre-line;

При таком подходе вы избегаете преобразования элемента .centered-holder в элемент блока, и вы все равно можете использовать, например, text-align:center в родительском контейнере.

до строки- Это значение приведет к сглаживанию последовательностей пробелов в один пробельный символ. Разрывы строк будут происходить везде необходимо заполнить линейные ящики и на новых строках разметки (или на появление "\ a" в сгенерированном контенте). Другими словами, нормальный, за исключением того, что он честный явный разрыв строки.

Здесь вы можете найти дополнительную информацию о пробеле:

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

Чтобы закончить, вы можете использовать эти объявления CSS:

.parent-container {
    white-space: pre-line /* Create new line for each DIV */;
    line-height:0 /* Mask the extra lines */;
    *white-space: pre /*FixIE7*/;
    *word-wrap: break-word /*FixIE7*/;
}

.centered-holder {
    display: inline-block;
    line-height:100% /* Restore a default line-height */;
    *display: inline /*FixIE7*/;
    *zoom: 1 /*FixIE7*/;
}

Я нашел этот вопрос очень интересным, поэтому я даю также объявления CSS для исправлений IE6-7 (pre-line и inline-block). Это должно быть полезно для некоторых других людей, у которых есть аналогичная проблема.

Ответ 2

Если вы удалите display: inline-block;, они будут складывать один поверх другого.

Элементы уровня блока начинаются в новой строке, а по умолчанию DIV является блочным уровнем.

Ответ 3

Или вы можете просто добавить один div с блоком отображения после встроенных блоков.

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}
.clear-inline {
    display: block;
}

Тогда

<div class="centered-holder">misc content 1</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 2</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 3</div>
<div class="clear-inline"></div>