table» — Блог HTML Academy
Восстановление подмоченной репутации CSS-таблиц
Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.
Использование таблицы в разметке — щекотливая тема. Для многих веб-разработчиков табличная вёрстка — табу. Хотя существует множество доводов против этого, большинство разработчиков не могут внятно объяснить, почему нельзя использовать табличную разметку, кроме того, что «таблицы — это плохо».
Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.
Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).
Оглядываясь назад, я понимаю, что с упрямством, достойным лучшего применения, тратил огромное количество времени на то, чтобы «заточить» CSS под нужную мне задачу.
Два типа табличной разметки
Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.
HTML-таблица — это когда для создания таблицы используется нативный HTML-тег <table>, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.
Есть ключевое различие
Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.
Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!
На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.
Ниже вы найдёте несколько примеров использования display: table:
Динамическое вертикальное выравнивание по центру
Нажимайте на кнопку, чтобы добавить строчки.
Это, пожалуй, самый распространённый способ использования display: table. С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.
Есть также другой, более короткий, способ вертикального выравнивания, который может вас заинтересовать:
Динамическое горизонтальное выравнивание по центру
Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным (display: inline-block). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center. Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center, которое может переопределить существующие свойства.
Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto.
Адаптивная вёрстка
Уменьшите окно до <480px, чтобы увидеть адаптивность в действии.
Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block, мы сможем расположить элементы в стопку.
Порядок следования меняется с 1-2-3 на 2-3-1
Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.
Динамический прилипающий подвал
Динамический прилипающий подвалПрилипающий подвал должен соответствовать двум требованиям:
- Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
- Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.
Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.
Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.
Разметка «Holy Grail»
Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.
Разметка «Holy Grail»Такая разметка должна по мере возможности удовлетворять следующим требованиям:
- Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
- Центральная колонка может идти первой в разметке.
- Любая колонка может быть больше остальных по высоте.
Разметка «Holy Grail» с помощью display: table
В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».
Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».
Вы шутите? Flexbox всё решит!
Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table.
Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.
Заключение
Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table. Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.
display | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
| Значение | Описание | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | |||||||||||
| inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | |||||||||||
| inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | |||||||||||
| inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. | |||||||||||
| list-item | Элемент выводится как блочный и добавляется маркер списка. | |||||||||||
| none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. | |||||||||||
| run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. | |||||||||||
| table | Определяет, что элемент является блочной таблицей подобно использованию тега <table>. | |||||||||||
| table-caption | Задает заголовок таблицы подобно применению тега <caption>. | |||||||||||
| table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). | |||||||||||
| table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <col>. | |||||||||||
| table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>. | |||||||||||
| table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>. | |||||||||||
| table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>. | |||||||||||
| table-row | ||||||||||||
| table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>. |
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display</title> <style> .example { border: dashed 1px #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Шрифт текста */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы вокруг */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Устанавливаем как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер текста */ margin: 0; /* Убираем отступы вокруг */ white-space: nowrap; /* Отменяем переносы текста */ } </style> </head> <body> <p>Пример</p> <p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById(«elementID»).style.display
Браузеры
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для тега <col>;
- значение table-column-group поддерживается только для тега <colgroup>.
Chrome 2.0, а также Safari версии 3 и старше, iOS:
- значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
display | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
contents | Chrome Полная поддержка 65
| Edge Полная поддержка 79 | Firefox Полная поддержка 37
| IE Нет поддержки Нет | Opera Полная поддержка 52
| Safari Полная поддержка 11.1 | WebView Android Полная поддержка 65 | Chrome Android Полная поддержка 65
| Firefox Android Полная поддержка 57 | Opera Android Полная поддержка 47
| Safari iOS Полная поддержка 11.3 | Samsung Internet Android Полная поддержка 9.0 |
contents: Specific behavior of unusual elements when display: contents is applied to them | Chrome Полная поддержка 58 | Edge Полная поддержка 79 | Firefox Полная поддержка 59 | IE Нет поддержки Нет | Opera Полная поддержка 45 | Safari Нет поддержки Нет | WebView Android Полная поддержка 65 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 59 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 9.0 |
<display-outside> | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
display-outside.run-in Экспериментальная | Chrome Нет поддержки 1 — 32
| Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Полная поддержка 8 | Opera Нет поддержки 7 — 19 | Safari Нет поддержки 1 — 8
| WebView Android Нет поддержки ≤37 — ≤37 | Chrome Android Нет поддержки 18 — 32 | Firefox Android Нет поддержки Нет | Opera Android Нет поддержки 10.1 — 19 | Safari iOS Нет поддержки 1 — 8
| Samsung Internet Android Нет поддержки 1.0 — 2.0 |
flex | Chrome Полная поддержка 29
| Edge Полная поддержка 12 | Firefox Полная поддержка 20
| IE Частичная поддержка 11
| Opera Полная поддержка 16
| Safari Полная поддержка 9
| WebView Android Полная поддержка 4.4
| Chrome Android Полная поддержка 29
| Firefox Android Полная поддержка 20
| Opera Android Полная поддержка 16
| Safari iOS Полная поддержка 9
| Samsung Internet Android Полная поддержка 2.0
|
flow-root | Chrome Полная поддержка 58 | Edge Полная поддержка 79 | Firefox Полная поддержка 53 | IE Нет поддержки Нет | Opera Полная поддержка 45 | Safari Полная поддержка 13 | WebView Android Полная поддержка 58 | Chrome Android Полная поддержка 58 | Firefox Android Полная поддержка 53 | Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 13 | Samsung Internet Android Полная поддержка 7.0 |
grid | Chrome Полная поддержка 57 | Edge Полная поддержка 16
| Firefox Полная поддержка 52 | IE Частичная поддержка 10С префиксом Замечания
| Opera Полная поддержка 44 | Safari Полная поддержка 10.1 | WebView Android Полная поддержка 57 | Chrome Android Полная поддержка 57 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 10.3 | Samsung Internet Android Полная поддержка 6.0
|
inline-block | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 8
| Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
inline-flex | Chrome Полная поддержка 29
| Edge Полная поддержка 12 | Firefox Полная поддержка 20
| IE Полная поддержка 11
| Opera Полная поддержка 16
| Safari Полная поддержка 9
| WebView Android Полная поддержка 4.4
| Chrome Android Полная поддержка 29
| Firefox Android Полная поддержка 20
| Opera Android Полная поддержка 16
| Safari iOS Полная поддержка 9
| Samsung Internet Android Полная поддержка 2.0
|
Свойство display
Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.
Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.
| display | |
|---|---|
| Значения: | |
| inline | Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>. |
| block | Элемент генерирует структурный блок, как и тег <div>. |
| flex | Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов. |
| inline-block | Элемент генерирует строковый блок. |
| inline-flex | Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов. |
| inline-table | Элемент определяет структурный блок, который генерирует строковый блок. |
| list-item | Элемент генерирует структурный блок, который отображается как элемент списка <li>. |
| table | Элемент генерирует структурный блок. На странице ведет себя аналогично <table>. |
| table-caption | Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>. |
| table-column | Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>. |
| table-column-group | Элемент объединяет один или несколько столбцов. Аналог — <colgroup>. |
| table-cell | Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>. |
| table-header-group | Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>. |
| table-footer-group | Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>. |
| table-row-group | Элемент объединяет одну или несколько строк. Аналог — <tbody. |
| table-row | Элемент является строкой ячеек. Пример — <tr>. |
| none | Элемент не генерирует никакой контейнер, полностью удаляясь со страницы. |
| inherit | Наследует свойство от родительского элемента. |
Свойство display | CSS справочник
CSS свойстваОпределение и применение
CSS свойство display определяет как должен отображаться определенный элемент HTML.
Поддержка браузерами
Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе.
CSS синтаксис:
display:"inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit";
JavaScript синтаксис:
object.style.display = "block"
Значения свойства
| Значение | Описание |
|---|---|
| inline | Элемент отображается как строчный (inline) элемент (например — <span>). Это значение по умолчанию. |
| block | Отображает элемент как блочный элемент (например — <h2> ). |
| flex | Элемент отображается как блочный flex-контейнер. |
| grid | Элемент отображается как блочный grid-контейнер. |
| inline-block | «Блочно-строчные» элементы — позволяет задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы. |
| inline-flex | Элемент отображается как строчный flex-контейнер. |
| inline-grid | Элемент отображается как строчный grid-контейнер. |
| inline-table | Определяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами). |
| list-item | Элемент ведет себя как элемент списка — <li>. |
| table | Элемент ведет себя как блочная таблица — <table>. |
| table-caption | Элемент ведет себя как наименование таблицы — <caption>. |
| table-column-group | Элемент ведет себя как группа столбцов — <colgroup>. |
| table-header-group | Элемент ведет себя как «шапка таблицы» — <thead>. |
| table-footer-group | Элемент ведет себя как «подвал таблицы» — <tfoot>. |
| table-row-group | Элемент ведет себя как «тело таблицы» — <tbody>. |
| table-cell | Элемент ведет себя как ячейка таблицы — <td>. |
| table-column | Элемент ведет себя как часть группы столбцов — <col>. |
| table-row | Элемент ведет себя как строка таблицы — <tr>. |
| none | Элемент не будет отображаться в документе (под него не резервируется место на странице). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Использование блочно-строчных элементы</title>
<style>
div {
display : inline-block; /* элементы будут отображаться как "блочно-строчные" */
width : 200px; /* задаём ширину блока */
background-color : orange; /* задаём цвет заднего фона */
text-align : center; /* выравниваем текст по центру внутри элементов */
background-color : 3px solid green; /* задаём для элементов сплошную границу зелёного цвета размером 3px */
margin-bottom : 10px; /* устанавливаем внешний отступ снизу от элементов */
}
</style>
</head>
Насколько хорошо вы знаете свойство CSS display?
display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block, inline CSS и none. Также часто используются table и inline-block. Новым и весьма полезным является значение flex, потому что оно было создано специально для разметки.
При рассмотрении свойства display нельзя не упомянуть дерево блоков. Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.
Значения свойства display, которые мы постоянно используем — на самом деле сокращения. Например, block — сокращение от block flow. Полный список можно найти в спецификации.
Для всех элементов задано значение свойства display по умолчанию, но оно может быть переопределено.
display: none;
Удаляет элемент и все его дочерние элементы из потока документа. Документ отображается так, как если бы элемент в нем никогда не существовал. Пространство, которое он занимает, распределяется между другими элементами.
CSS display inline;
Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.
display: block;
Генерирует поле для блочного элемента. Все блочные элементы начинаются с новой строки и растягиваются по ширине контейнера.
display: list-item;
Элемент, отображаемый, как элемент списка, ведет себя так же, блочный. Но также генерирует поле маркера, для которого могут быть заданы стили с помощью свойства list-style. Только элементы <li> по умолчанию имеют значение list-item. Данное значение используется для сброса элементов <li> на поведение по умолчанию.
display inline block CSS
Посмотреть пример
Создается позиция для блочного элемента, но все поле ведет себя как, встроенный элемент. Попробуйте открыть приведенный выше пример и изменить ширину окна, чтобы лучше понять, как это работает.
Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет «ломался«.
Проблема была связана с текстом в скобках, который не разбивался красиво. Так что мне пришлось обработать кучу медиа-запросов, чтобы настроить отображение соответствующих элементов при различной ширине окна.
Посмотреть пример
Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display.
| table | Соответствует HTML-элементу <table>. Определяет структурный блок. |
| table-header-group | Соответствует HTML-элементу <thead>. |
| table-row | Соответствует HTML-элементу <tr>. |
| table-cell | Соответствует HTML-элементу <td>. |
| table-row-group | Соответствует HTML-элементу <tbody>. |
| table-footer-group | Соответствует HTML-элементу <tfoot>. |
| table-column-group | Соответствует HTML-элементу <colgroup>. |
| table-column | Соответствует HTML-элементу <col>. |
| table-caption | Соответствует HTML-элементу <caption>. |
| inline-table CSS | Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня. |
@media screen and (min-width: 720px) {
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
}
.tr {
margin-bottom: 1.6rem;
}
@media screen and (min-width: 720px) {
.tr {
display: table-row;
}
}
@media screen and (min-width: 720px) {
.td {
display: table-cell;
border: #f0f0f0 1px solid;
padding: 0.4rem;
}
.td:first-child {
width: 11em;
}
}
.th {
font-size: 1rem;
line-height: 1.6rem;
font-family: "Palo Alto";
}
@media screen and (min-width: 720px) {
.th {
font-size: 1.294rem;
line-height: 1.6rem;
}
}
@media screen and (min-width: 720px) {
.th {
font-size: 0.8rem;
line-height: 1.6rem;
font-family: "Roboto Slab", Rockwell, serif;
font-weight: 700;
}
}
@media screen and (min-width: 720px) and (min-width: 720px) {
.th {
font-size: 1rem;
line-height: 1.6rem;
}
}
.th::before {
content: 'display: ';
}
@media screen and (min-width: 720px) {
.th::before {
content: '';
}
}
.th::after {
content: ';';
}
@media screen and (min-width: 720px) {
.th::after {
content: '';
}
}Автор спецификаций Flexbox и Grid, сделал очень меткое замечание по поводу новых режимов отображения:
inline flex CSS предназначен для одномерных макетов, которые можно уложить в одну строку.Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.
Введение режима flexbox или CSS Flexible Box, ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.
Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.
И когда появился CSS, мы перешли на плавающие макеты, вкладывая элементы в различные div, чтобы они обтекали и смещались, как нам нужно а. Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:
Объявляя для элемента display: flex, inline flex CSS, мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер, и flex-элементы имеют соответствующие им свойства.
flex-direction — определяет главную ось и направление гибких элементов. Полный список значений flex-direction.
flex-wrap — указывает, должны ли flex-элементы настраиваться таким образом, чтобы поместиться в одну строку, или они могут быть перенесены на несколько строк. Полный список значений flex-wrap.
flex-flow — сокращенное свойство от flex-direction и flex-wrap. Полный список значений flex-flow.
justify-content — определяет, как распределяется вдоль главной оси пространство между и вокруг flex-элементов. Полный список значений justify-content.
align-items — определяет, как пространство между и вокруг flex-элементов распределяется перпендикулярно главной оси. Полный список значений align-items.
align-content — определяет, как линии flex-элементов распределены внутри контейнера. Не применяется, если элементы размещаются только в одной строке. Полный список значений align-content.
order — указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS.
flex-grow — определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow.
flex-shrink — определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink.
flex-basis — определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis.
flex — сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex.
align-self — позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self.
Сетки дают возможность создавать сеточные системы и контролировать расположение элементов через CSS, что позволяет четче разделить задачи с HTML. При использовании с медиа-запросами CSS-сетки становятся мощным дополнением к используемому набору инструментов, когда речь идет о создании гибких макетов.
Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox, эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML.
Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms-. Когда-то так было и с CSS inline block.
После непоследовательной реализации спецификации flexbox разработчики CSS-сеток решили применить другой подход. Создатели браузеров используют префиксы, чтобы добавить в них экспериментальные функции для разработчиков с целью проверки. Это помогает в процессе уточнения спецификации и отработке несоответствий, прежде чем спецификация станет официальной.
Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить «экспериментальные функции веб-платформы». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled — true.
Сеточный контейнер — аналогично концепции гибкого контейнера, применив к элементу `display: grid;` мы делаем его дочерние элементы сеточными элементами.
Сеточный элемент — если к родительскому элементу применено `display: grid;` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.
Трек сетки — это может быть либо столбец или ряд сетки.
Линия сетки — линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.
Ячейки сетки — одиночные блоки сетки, ограниченные соседними горизонтальными и вертикальными линиями.
Пространство сетки — это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.
Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.
Устанавливает элемент как встроенный или блочный в зависимости от контекста.
Для начала стоит представить элемент <ruby>. В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.
Существуют определенные общие черты между свойствами display: ruby и inline table CSS, но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста. Вместо этого лучше разметить контент с использованием HTML-элементов ruby, чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby.
| ruby | Соответствует HTML-элементу <ruby>. Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки. |
| ruby-base | Соответствует HTML-элементу <rb>. Внутренний ruby-блок в ruby-контексте. |
| ruby-text | Соответствует HTML-элементу <rt>. Внутренний ruby-блок в ruby-контексте. |
| ruby-base-container | Соответствует HTML-элементу <rbc>. Внутренний ruby-блок в ruby-контексте. |
| ruby-text-container | Соответствует HTML-элементу <rtc>. Внутренний ruby-блок в ruby-контексте. |
— CSS Display Level Модуль 3
Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents, он исчезнет из DOM. Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox. Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.
Посмотреть пример
Описание inline CSS и других значений display заняло намного больше времени, чем первоначально ожидалось. Я действительно взволнован по поводу новых возможностей, которые уже очень скоро окажутся в нашем распоряжении. С их помощью мы сможем создавать уникальные макеты без необходимости прибегать к хакам. Я надеюсь, что эта статья мотивирует вас узнать больше о макетах CSS.
Данная публикация представляет собой перевод статьи «How well do you know CSS display?» , подготовленной дружной командой проекта Интернет-технологии.ру
display | CSS | WebReference
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Краткая информация
| Значение по умолчанию | inline |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
display: block | inline | inline-block | inline-table |
inline-flex | flex | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-groupОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- block
- Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
- inline
- Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
- inline-block
- Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
- inline-table
- Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
- inline-flex
- Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
- flex
- Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
- list-item
- Элемент выводится как блочный и добавляется маркер списка.
- none
- Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
- run-in
- Устанавливает элемент как блочный или строчный, в зависимости от контекста.
- table
- Определяет, что элемент является блочной таблицей, подобно использованию <table>.
- table-caption
- Задаёт заголовок таблицы, подобно применению <caption>.
- table-cell
- Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
- table-column
- Назначает элемент колонкой таблицы, словно был добавлен <col>.
- table-column-group
- Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
- table-footer-group
- Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
- table-header-group
- Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
- table-row
- Элемент отображается как строка таблицы (<tr>).
- table-row-group
- Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>display</title> <style> .example { border: dashed 1px #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: «Courier New», Courier, monospace; /* Шрифт текста */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Устанавливаем как строчный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер текста */ margin: 0; /* Убираем отступы */ white-space: nowrap; /* Отменяем переносы текста */ } </style> </head> <body> <p>Пример</p> <p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html></p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
Объект.style.display
Примечание
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для элементов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для <col>;
- значение table-column-group поддерживается только для <colgroup>.
Chrome до версии 4, а также Safari до версии 5:
- значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
Chrome 32
- Значение run-in больше не поддерживается.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| none, inline, block | 4 | 12 | 1 | 7 | 1 | 1 |
| inline-block | 5.5 | 12 | 1 | 7 | 1 | 3 |
| inline-flex, flex | 11 | 12 | 29 | 17 | 9 | 28 |
| list-item | 6 | 12 | 1 | 7 | 1 | 1 |
| run-in | 8 | 12 | 1 | 7 | 1 | |
| inline-table | 8 | 12 | 1 | 7 | 1 | 3 |
| table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption | 8 | 12 | 1 | 7 | 1 | 1 |
| none, inline, block | 1 | 1 | 8 | 1 |
| inline-block | 1 | 1 | 8 | 1 |
| inline-flex, flex | 4.4 | 28 | 12.1 | 9.2 |
| list-item | 1 | 1 | 8 | 1 |
| run-in | 1 | 8 | 1 | |
| inline-table | 1 | 1 | 8 | 1 |
| table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption | 1 | 1 | 8 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 27.08.2017
Редакторы: Влад Мержевич
CSS свойство отображения
Пример
Использование различных отображаемых значений:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство display определяет поведение отображения
(тип окна рендеринга) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. значение по умолчанию в XML является встроенным, включая элементы SVG.
| Значение по умолчанию: | ? |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Прочитать о animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.display = «никто» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| дисплей | 4,0 | 8,0 | 3.0 | 3,1 | 7,0 |
Примечание: Значения «flex» и «inline-flex» требуют, чтобы префикс -webkit- работал в Safari.
Примечание. «display: contents» не работает в Edge / Internet Explorer.
Синтаксис CSS
Стоимость недвижимости
| Значение | Описание | Играй | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| рядный | Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта | Играй » | ||||||||||||||||||||||||||||||||||
| блок | Отображает элемент как блочный (например, ). Это начинается на новая строка и занимает всю ширину | Играй » | ||||||||||||||||||||||||||||||||||
| содержание | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM | Играй » | ||||||||||||||||||||||||||||||||||
| шлейф | Отображает элемент как гибкий контейнер на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||
| сетка | Отображает элемент как контейнер сетки на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||
| рядный блок | Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Играй » | ||||||||||||||||||||||||||||||||||
| линейный гибкий | Отображает элемент как гибкий контейнер встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| линейная сетка | Отображает элемент как контейнер сетки встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| встроенный стол | Элемент отображается как таблица встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| список | Пусть элемент ведет себя как элемент | Играй » | ||||||||||||||||||||||||||||||||||
| обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | Играй » | ||||||||||||||||||||||||||||||||||
| стол | Пусть элемент ведет себя как элемент
Другие примерыПримерДемонстрация использования значения свойства contents. В следующих Например, контейнер .a исчезнет, а дочерние элементы (.б) дочерние элементы элемента на следующий уровень в DOM: .a {дисплей: содержание; граница: 2px сплошной красный; цвет фона: #ccc; отступ: 10 пикселей; ширина: 200 пикселей; } .b { ПримерДемонстрация того, как использовать значение наследуемого свойства: body {display: встроенный; } p { ПримерУстановить направление некоторых гибких элементов внутри элемента в обратном направлении
заказ: div { Связанные страницыУчебникCSS: Отображение CSS и видимость Ссылка на HTML DOM: свойство отображения , html — Как (и почему) использовать display: table-cell (CSS)Переполнение стека
Антигерой макета CSS — «дисплей: таблица»
Тема использования таблиц в макетах — деликатная. В общем, веб-разработчики считают табличную верстку табу. Хотя причины против этого хорошо задокументированы, большинство разработчиков не могут предоставить надежный фон для расшифровки макета таблицы, за исключением того, что «таблицы — это плохо». Движение раннего движения против таблиц HTML было сильным. Ему удалось «промыть мозги» многим поколениям разработчиков, заставив их думать, что любое использование таблицы — зло. По общему признанию, я один из тех разработчиков, которые избегали компоновки таблиц даже для отображения табличных данных. Я даже упрекал своих коллег-разработчиков, когда они использовали отображение Оглядываясь назад, я могу сказать, что с моей стороны было невероятно упрямым тратить нелепое количество времени на взлом CSS. Два типа сервировки столаСуществует два способа использования таблицы в макете — HTML Table и CSS Table . HTML Table относится к использованию таблицы с собственным тегом Как человек, изучивший свое ремесло в CSS Zen Garden, я ненавижу HTML-макет таблицы.По незнанию, я попался на «иллюзорную ошибку корреляции», переоценив взаимосвязь между HTML Table и CSS Table . Если это выглядит, работает и звучит как таблица, это должна быть таблица? Неправильно! На самом деле CSS Table имеет ключевое отличие от HTML Table . Он может не быть таблицей, просто настроив его свойства CSS. То, на что HTML Table неспособен.И с этим вы можете разблокировать множество возможностей, выбирая макеты, которые вы получаете из таблицы. Ниже приведены некоторые примеры отображения Это, пожалуй, наиболее распространенный вариант использования дисплея Есть еще один более короткий способ вертикального выравнивания элемента, который может вас заинтересовать: Эта суть обозначена так не просто так.Но это другая история на другой день. Чтобы выровнять динамический элемент по центру по горизонтали, вы можете установить элемент как Благодаря @mojtabaseyedi я нашел новый способ горизонтального выравнивания динамического элемента по центру без побочных эффектов. Примените Как упоминалось выше, таблица CSS может не вести себя как таблица, когда захочет. Переключив свойство Вы даже можете изменить порядок стека. Вы можете узнать больше о технике здесь. Липкий нижний колонтитул должен соответствовать этим двум критериям: Если вы когда-нибудь искали решение для липкого нижнего колонтитула, вы могли встретить эти полезные фрагменты Криса Койера или Райана Фейта. Их решения работают очень хорошо, но есть только один недостаток — нижний колонтитул должен иметь фиксированную высоту. Вы можете решить эту проблему с помощью javascript, но я предпочитаю решать ее с помощью CSS. С помощью Согласно alistapart, макет Святого Грааля представляет собой страницу с заголовком, 3 столбцами одинаковой высоты (2 фиксированных боковых панели и плавный центр) и липким нижним колонтитулом. Насколько это возможно, макет Святого Грааля должен достигать следующих целей: Приведенный выше кодовый ключ воссоздает макет Holy Grail . Вы можете изменить размер окна до среднего столбца, а также добавить больше контента для проверки липкого нижнего колонтитула. Единственная цель, которую не удалось выполнить — 2) позволяет центральному столбцу появляться первым в источнике Я предполагаю, что эта цель предназначена для SEO.Следовательно, если SEO не имеет первостепенного значения, Действительно может. Ознакомьтесь с гибким решением Филипа Уолтона в приведенных выше примерах. Однако в ближайшее время я не тороплюсь с этим. IE8 и IE9 по-прежнему составляют 32% рынка браузеров для настольных ПК, и от этого нужно много отказаться, если я вернусь к гибкому решению. Если только веб-сайт не обслуживает исключительно мобильный трафик, в чем я очень сомневаюсь, я все равно буду придерживаться своего дисплея Обновление: я работаю в консалтинговой компании, поэтому меня беспокоит совместимость настольных компьютеров. Но если вам нужно обслуживать только мобильные браузеры, не стесняйтесь. Надеюсь, что с помощью приведенных выше примеров я смогу раскрыть качества заклейменного дисплея Рекомендуемая литература: Макет таблицы в CSS: Подробная визуализация таблицы CSS Понравилась статья? |