Содержание
Таблица без таблицы или display: table-cell для всех браузеров
Перед верстальщиком часто ставят задачу выстроить блоки произвольной ширины в одну линию, например, для ленты фотографий. Эту задачу можно решить в лоб — сделать таблицу, она растянется на нужную длину, и там точно ничего не будет переноситься. Но я расскажу о другом способе.
Все современные браузеры могут отрисовывать блок как таблицу, строку таблицы или ячейку таблицы являясь на самом деле обычными блочными или даже строчными элементами.
Разметка, например, может быть такой:
Старые браузеры такие значения свойства display не воспринимают. Но для них есть замечательная комбинация других свойств, дающая аналогичный результат.
Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.
Ещё заметки со схожей тематикой
Категории
Коментарии к заметке
В пост врывается inline-block, который с white-space: nowrap у родителя даст как раз то, что нужно.
Кроме того, подобную «ленту» можно довольно удобно двигать влево без лишних врапперов, задавая первому элементу отрицательный левый маджин.
Точно. Элементы с inline-block можно выравнивать по вертикали как в настоящей таблице.
Надо только помнить, что пробелы в разметке дадут лишние пикселы между блоками. Кстати, с этими лишними пикселами можно успешно бороться.
Я уж было поверил, что вы действительно нашли способ эмулировать свойство table-cell. А оказывается тут всего лишь давно известный способ расположить блочные элементы в строку, причём как правильно подмечено, это можно сделать более изящно. Самое главное вы, мне кажется, не уловили. Свойство table-cell позволяет элементам не только размещаться в одном ряду, но и заполнять родительский блок полностью, РАСТЯГИВАЯСЬ по всей его ширине. Копируя таким образом поведение ячеек в таблице. Это крайне полезно, к примеру, в вёрстке горизонтальной навигации, где количество пунктов может меняться, но при этом не потребуется менять стили.
Роман, чаще всего в реальной жизни не бывает одного универсального способа для решения какой-либо задачи. Мне кажется полезным знать не только «cutting edge» решения (которые тоже не идеальны), а еще и вытаскивать из нафталина что-нибудь старенькое проверенное годами.
По поводу растягивания ячеек я могу предложить только expression. Но, так полагаю, что «это не наш метод». Не поленитесь оставить комментарий, пожалуйста, если найдете что-нибудь интересное по этой теме.
Сегодня целый день пытался всеми известными способами выровнять два блока, и только это решение меня спасло. Благодарен Вам за полезный пост
Насколько я знаю в основном table-cell используют для вертикального выравнивания контента, а при обтекании оно перестает работать. Ну и еще для таких блоков не работают внешние отступы margin.
Отлично! То что нужно. Замечательная альтернатива
В верстке присутствуют ошибка!
Александр, по-моему, всё в порядке с вёрсткой. Ширина ячейки таблицы зависит от контента. Ширина таблицы равна сумме ширин всех её ячеек.
Добавить комментарий
© 2009–2017 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.
Копирование материалов данного блога допускается только с разрешения автора.
CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице
Полный список свойств и тегов, которые они заменяют:
| display: table; | |
| display: inline-table; |
| display: table-caption; | ||
| display: table-column-group; | ||
| display: table-column; | ||
| display: table-header-group; | ||
| display: table-row-group; | ||
| display: table-footer-group; | ||
| display: table-row; | ||
| display: table-cell; | или |
Таблица — сетка
Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .
Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:
I have 2 divs as display: table-cell . I need a space between them.
margin-left: 5px for the second div does not work.
I already saw the Why is a div with "display: table-cell;" not affected by margin? answer, but my question is not about how to have a border around a cell, but a LEFT MARGIN (and not padding!) for a concrete cell (the right one)
setting the green div as
makes the space not only between cells, but also all around cells, that is NOK.