Перед верстальщиком часто ставят задачу выстроить блоки произвольной ширины в одну линию, например, для ленты фотографий. Эту задачу можно решить в лоб — сделать таблицу, она растянется на нужную длину, и там точно ничего не будет переноситься. Но я расскажу о другом способе.
Все современные браузеры могут отрисовывать блок как таблицу, строку таблицы или ячейку таблицы являясь на самом деле обычными блочными или даже строчными элементами.
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
Разметка, например, может быть такой:
<div class="table">
<ul class="table-row">
<li class="table-cell">Ячейка 1</li>
<li class="table-cell">Ячейка 2</li>
<li class="table-cell">Ячейка 3</li>
</ul>
</div>
Старые браузеры такие значения свойства
display не воспринимают. Но для них есть замечательная комбинация других свойств, дающая аналогичный результат.
.table, .table-row, .table-cell {
display: block;
float: left;
}
.table-cell {
clear: right;
zoom: 1;
}
.table {
overflow: hidden;
position: relative;
}
Комбинация float: left; и clear: right;
заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.
Коментарии к заметке
В пост врывается inline-block, который с white-space: nowrap у родителя даст как раз то, что нужно.
Кроме того, подобную «ленту» можно довольно удобно двигать влево без лишних врапперов, задавая первому элементу отрицательный левый маджин.
Точно. Элементы с inline-block можно выравнивать по вертикали как в настоящей таблице.
Надо только помнить, что пробелы в разметке дадут лишние пикселы между блоками. Кстати, с этими лишними пикселами можно успешно бороться.
Я уж было поверил, что вы действительно нашли способ эмулировать свойство table-cell. А оказывается тут всего лишь давно известный способ расположить блочные элементы в строку, причём как правильно подмечено, это можно сделать более изящно. Самое главное вы, мне кажется, не уловили. Свойство table-cell позволяет элементам не только размещаться в одном ряду, но и заполнять родительский блок полностью, РАСТЯГИВАЯСЬ по всей его ширине. Копируя таким образом поведение ячеек в таблице. Это крайне полезно, к примеру, в вёрстке горизонтальной навигации, где количество пунктов может меняться, но при этом не потребуется менять стили.
Роман, чаще всего в реальной жизни не бывает одного универсального способа для решения какой-либо задачи. Мне кажется полезным знать не только «cutting edge» решения (которые тоже не идеальны), а еще и вытаскивать из нафталина что-нибудь старенькое проверенное годами.
По поводу растягивания ячеек я могу предложить только expression. Но, так полагаю, что «это не наш метод». Не поленитесь оставить комментарий, пожалуйста, если найдете что-нибудь интересное по этой теме.
Сегодня целый день пытался всеми известными способами выровнять два блока, и только это решение меня спасло. Благодарен Вам за полезный пост
Насколько я знаю в основном table-cell используют для вертикального выравнивания контента, а при обтекании оно перестает работать. Ну и еще для таких блоков не работают внешние отступы margin.
Отлично! То что нужно. Замечательная альтернатива <table>
В верстке присутствуют ошибка!
Александр, по-моему, всё в порядке с вёрсткой. Ширина ячейки таблицы зависит от контента. Ширина таблицы равна сумме ширин всех её ячеек.