Макет из трех колонок. Многоколоночность на CSS подробнее
В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
1 2 3 4 5 6 7 8 | id = "page" > <div id = "main" > </ div > |
То есть нам необходимо сделать так, чтобы блок Определим flexbox для основного контейнера, в котором находятся два блока: Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара: Пояснения: Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах: Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи. Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11. Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое. Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье. Влад Мержевич Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы. Рис. 5.17. Трёхколоночные макеты Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты. Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position
со значением relative
, а дочерним элементам, которые формируют колонки, значение absolute
. Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13. Пример 5.13. Две колонки в пикселах или три в процентах
Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа. У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout
нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок. Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14). Пример 5.14. Макет № 1 Header { background: #D5BAE4; }
.layout { position: relative; /* Относительное позиционирование */ }
.layout DIV { position: absolute; /* Абсолютное позиционирование */ }
.col1 {
background: #C7E3E4; /* Цвет фона */
left: 0; /* Положение левого края */
right: 300px; /* Положение правого края */
}
.col2 {
background: #E0D2C7;
width: 200px; /* Ширина колонки */
right: 100px; /* Сдвигаем влево на ширину колонки 3 */
}
.col3 { background: #ECD5DE; width: 100px; right: 0; }
У колонок с заданной шириной стоит свойство width
, а их положение слева или справа задаётся соответственно свойством left
или right
. Резиновая ширина оставшейся колонки строится после одновременного добавления left
и right
, значения которых совпадают с шириной фиксированных колонок. Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе. Пример 5.15. Макет № 2 Header { background: #D5BAE4; }
.layout { position: relative; }
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; width: 100px; }
.col2 { background: #E0D2C7; left: 100px; right: 200px;}
.col3 { background: #ECD5DE; width: 200px; right: 0; }
Пример 5.16. Макет № 3 Header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; width: 100px; }
.col2 { background: #E0D2C7; width: 200px; left: 100px; }
.col3 { background: #ECD5DE; left: 300px; right: 0; }
Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18). Рис. 5.18. Ширина колонок, заданная в дробных процентах В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17. Пример 5.17. Макет № 4 Header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; width: 33%; }
.col2 { background: #E0D2C7; left: 33%; width: 34%; }
.col3 { background: #ECD5DE; right: 0; width: 33%; }
В некоторых браузерах возможно появление небольшого промежутка между колонками. Решается использованием не целых, а дробных значений процентов, т.е. 33.3% вместо 33%. Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5. Рис. 5.19. Ширина двух резиновых колонок В первом варианте ширина первой колонки задана в процентах от ширины макета, ширина второй колонки вычисляется автоматически, а третья колонка имеет фиксированную ширину в пикселах. Во втором варианте колонки меняются между собой, и автоматически вычисляется ширина первой колонки. Третий вариант предполагает, что общая ширина резиновых колонок принимается за 100% и ширина первой и второй колонки вычисляется от неё. Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах. Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая Header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; width: 50%; }
.col2 { background: #E0D2C7; left: 50%; right: 200px; }
.col3 { background: #ECD5DE; right: 0; width: 200px; }
Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19. Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая Header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; }
.col2 { background: #E0D2C7; width: 50%; right: 200px; }
.col3 { background: #ECD5DE; width: 200px; right: 0; }
Первой колонке нельзя задать ограничение справа через свойство right
, поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right
и сдвинем его влево на ширину второй колонки 50% с помощью margin-right
. Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся. Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber
, относительно которого будет задаваться ширина колонок (пример 5.20). Пример 5.20. Макет № 5. Ширина двух колонок в процентах
Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20). Рис. 5.20. Макет № 7 с равными по ширине колонками Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right
для первой колонки и margin-left
для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right
: 100px
(пример 5.21). Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова Header { background: #D5BAE4; }
.layout { position: relative;}
.layout DIV { position: absolute; }
.col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; }
.col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; }
.col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }
Напрямую свойством width
пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left
и right
. С позиционированием второй колонки возникают сложности в указании значения left
или right
, поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left
: 50%
), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left
(margin-left
: -100px
). Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width
для селектора BODY
. Тогда ширина колонок не станет уменьшаться при достижении заданного предела. BODY {
min-width: 800px; /* Минимальная ширина макета */
}
Значение min-width
зависит от макета и содержимого страницы и обычно подбирается опытным путём. Плавающие элементы это ещё один универсальный метод построения разнообразных трёхколоночных макетов. В отличие от позиционирования он позволяют не заботиться о проблеме подвала, поскольку подвал всегда будет располагаться на своём месте под самой высокой колонкой. Построение колонок происходит с помощью свойства float
в сочетании со свойствами margin
и width
. В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float
. Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float
со значением right
. Для первой колонки также требуется задать свойство margin-right
со значением равным суммарной ширине остальных колонок (пример 5.22). Пример 5.22. Макет № 1
Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float
со значением left
для первой колонки и right
для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin
, задающее отступ слева и справа (пример 5.23). Пример 5.23. Макет № 2 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Положение первой и второй колонки указывается через свойство float
со значением left
, для третьей колонки нужно установить отступ слева (margin-left
) на суммарную ширину остальных колонок (пример 5.24). Пример 5.24. Макет № 3 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float
и width
. Пример 5.25. Макет № 4 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному. Здесь ширина первой колонки указывается в процентах, а её положение через свойство float
со значением left
, для третьей колонки ширина задана в пикселах, а значение свойства float
как right
. Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26). Пример 5.26. Макет 5.1 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right
указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1
ещё один слой с именем wrap
и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27). Пример 5.27. Макет 5.2 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber
совместно со слоем col3
работает как двухколоночный макет, а внутренние слои col1
и col2
выстраиваются по горизонтали за счёт применения свойства float
(пример 5.28). Пример 5.28. Макет 5.3 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой. Вначале готовим основу, указываем порядок слоёв в HTML-коде.
Col1 { width: 50%; float: left; }
.col2 { width: 200px; float: left; }
.col3 { width: 50%; float: right; }
Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left
: -100px
) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left
с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21). Рис. 5.21. Состыкованные колонки К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap
) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 5.29. Пример 5.29. Макет № 7 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В приведённые примеры макетов намеренно не добавлялось свойство padding
, поскольку код служит лишь основой макета, и вы сами должны в конкретных случаях решать, нужны поля в колонках или нет. Добавление полей и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для слоя установлено значение width
. Рассмотрим несколько примеров, где ширина будет меняться, а где нет. Div { /* padding влияет на ширину */
width: 200px;
padding: 10px;
}
div { /* padding не влияет на ширину */
position: absolute;
left: 20px; right: 20px;
padding: 10px;
}
div { /* padding влияет на ширину */
float: left;
width: 50%;
padding: 10px;
}
div { /* padding не влияет на ширину */
margin-right: 50%;
padding: 10px;
}
В тех колонках, где padding
или border
требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.
В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены. Таблицу удобно использовать для простого и быстрого создания колонок одинаковой высоты. Такая быстрота достигается несколькими вещами. Во-первых, структура кода для любого макета остаётся одинаковой, колонки в коде, как в случае с float
, свой порядок никогда не меняют. Во-вторых, ширина ячеек вычисляется автоматически исходя из их содержимого, поэтому достаточно указать ширину нужных колонок, а оставшиеся подстроятся под общую ширину таблицы. В примере 5.30 показан макет № 1 сделанный на таблице. Пример 5.30. Макет № 1 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Добавление свойства padding
к селектору TD
отменяет действие атрибута cellpadding
тега Макет № 2 Header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 100px; }
.col2 { background: #E0D2C7; }
.col3 { background: #ECD5DE; width: 200px; }
Макет № 3 Header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 100px; }
.col2 { background: #E0D2C7; width: 200px; }
.col3 { background: #ECD5DE; }
Макет № 4 Header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 33%; }
.col2 { background: #E0D2C7; width: 34%; }
.col3 { background: #ECD5DE; width: 33%; }
В макете 6.1 ширина первой колонки установлена в пикселах, третьей в процентах, а средняя колонка занимает оставшееся место. Макет № 6.1 Header, .footer { background: #D5BAE4; }
.layout { width: 100%;}
.layout TD { padding: 5px; vertical-align: top; }
.col1 { background: #C7E3E4; width: 200px; }
.col2 { background: #E0D2C7; }
.col3 { background: #ECD5DE; width: 40%; }
Остальные макеты с помощью таблицы строятся аналогично, меняется только значение свойства width
. Для макета № 7, в котором ширина крайних колонок резиновая и равна между собой имеются некоторые хитрости, так что на нём остановимся подробнее. Ширина для крайних колонок устанавливается равной 50%, а для средней колонки она задаётся в пикселах. Чтобы все размеры соблюдались к таблице необходимо добавить свойство table-layout
со значением fixed
. Layout { width: 100%; table-layout: fixed; }
.col1 { width: 50%; }
.col2 { width: 200px; }
.col3 { width: 50%; }
Хотя суммарная ширина ячеек превышает ширину таблицы, никакого расширения и смещения таблицы не произойдет, как это случилось бы с блочными элементами. Как в таких случаях говорится, это не баг, это фича! В примере 5.31 приведён полный код макета № 7. Пример 5.31. Макет № 7 XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Он встал под дерево и ждет, Раз-два, раз-два! Горит трава,
Взы-взы - стрижает меч, Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела Результат примера показан на рис. 5.22. Рис. 5.22. Колонка по центру макета Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания. Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript. Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически. На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками. Webkit-column-width
:15em
; Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS. Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета: Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx. Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h2. Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки. Добрвый день! Сегодня поговорим по трех колоночный макет сраницы. В сети есть очень интересный справочник по и , который будет несомненно полезен каждому уважающему себя web-мастеру. Ресурс этот — htmlbook.ru . Там много полезной информации. В данном посте мы рассмотрим макет в три колонки, который предлагается на этом ресурсе. Ничего сложного в нем нет. Если Вы изучали до этого и то разобраться в нем проще не куда! И так приступим.. Трехколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдается под контент, вторая под навигационные ссылки, а в третьей публикуются новости сайта или другая информация (рис. 1). Общий каркас определяется с помощью слоя с именем container, он задает ширину и выравнивание макета. Внутри располагаются колонки, причем их порядок в коде такой: левая (назовем ее nav), правая (aside), центральная (content). Построение слоев показано в примере 1. Пример 1. Колонки в коде
Положение слоев формируется через стили: для левой колонки устанавливается ширина (width) и обтекание по левому краю (float: left), для правой колонки - ширина и обтекание по правому краю (float: right), для центральной - отступ слева и справа на ширину левой и правой колонки (пример 2). Пример 2. Стиль для создания колонок
#container {
width: 900px; /* Ширина макета */
margin: 0 auto; /* Выравнивание по центру */
}
#nav {
width: 200px; /* Ширина левой колонки */
float: left;
}
#aside {
width: 300px; /* Ширина правой колонки */
float: right;
}
#content {
margin: 0 300px 0 200px; /* Отступ на ширину левой и правой колонки*/
}
Полный код страницы с учетом этого стиля представлен в примере 3. Пример 3. Трехколоночный макет
одиннадцать человек дошли до финала; один человек правильно указал в каком стиле писал Диего Веласкес; только один человек знал, кто изобрел пароход; У данной реализации есть несколько особенностей: Рис. 2. Правая колонка выше остальных В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета
страницы с использованием Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной , на котором предлагается множество хороших макетов для верстки страниц
со всевозможными вариантами представления контента. Особенности данного макета: Реализация в этом макете трех нужных колонок достигается за счет использования плавающих блоков
(контент, левая и правая колонки) и отрицательных отступов
для левой и правой колонок. При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг
— при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер
с id=”container” и указал ему ширину в 100%.
Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container {width: 100%;} для устранения бага в IE, необходимо одновременно задействовать правила минимальной ширины
для основного блока (width: expression и min-width). #wrapper {
width: 100%;
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?"1000px":"");
min-width: 1000px;
}
#container {width: 100%;}
#content {
width: 100%;
float: left;
}
#text {margin: 0 250px;}
#left {
float: left;
width: 250px;
margin-left: -100%;
}
#right {
float: left;
width: 250px;
margin-left: -250px;
}Колонки одинаковой высоты
CSS часть
Вывод
Использование позиционирования
Использование плавающих элементов
Макет № 1. Резиновая первая колонка
Макет № 2. Резиновая средняя колонка
Макет № 3. Резиновая третья колонка
Макет № 4. Ширина всех колонок задана в процентах
Макет № 5. Ширина двух колонок резиновая
Ширина средней колонки вычисляемая
Ширина первой колонки вычисляемая
Ширина двух колонок в процентах
Поля и границы в трёхколоночном макете
Таблица в качестве колонок
Колонка 1
Колонка 2
Колонка 3
и добавляет поля к содержимому ячеек. При этом сама ширина колонок никак не изменится.
И вдруг граахнул гром.
Летит ужасный бармаглот,
И пылкает огнем.
Ува! Ува! И голова
Барабардает с плеч.
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения. Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count
и/или column-width
. column-count
По-умолчанию, column-count
имеет значение auto
. Т.е. если задать column-width
, браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент..column
{
-webkit-column-count
:2
;
-moz-column-count
:2
;
}column-width
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %..column
{
-webkit-column-width
:15em
;
-moz-column-count
:15em
;
}
Конечно же можно комбинировать column-width
и column-height
:.column
{
-webkit-column-count
:2
;
-moz-column-count
:2
;
-moz-column-width
:15em
;
}Интервалы и линейки
Если полиграфические дизайнеры привыкли думать в терминах колонок и интервалов, то веб-дизайнеры были вынуждены работать с границами и отступами.colomn-gap
Спецификация W3C определяет значение интервала по-умолчанию в 1em, в примере мы и будем его использовать:.column
{
-webkit-column-gap
:1em
;
-moz-column-gap
:1em
;
}column-rule
Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size
, column-rule-style
и column-rule-color
, а можно использовать column-rule для
указания всех трёх свойств..column
{
-webkit-column-rule
:1em solid #000
;
-moz-column-rule
:1em solid Black
;
}Приколы использования
На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla. Что будет если колонки ограничить по высоте
Браузер добавит колонок, чтобы уместить текст.
Спасает overflow
:hidden
.Отображение линейки в одной колонке
Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.
WebKit:
Mozilla:Свойства, которые есть в спецификации, но не поддерживаются
Это свойства column-break
и column-span
. .column h2
{
column-break-before
:always
;
}.column h1
{
column-span
:all
;
}Заключение
Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.
Статистика
Опрос общественного мнения показал
Структура HTML-кода
CSS-таблицы