При создании столбцов, как правило удобнее использовать таблицы. Явными преимуществами которых является: удобное выравнивание, одинаковая высота столбцов и растягивание под содержимое.
На этом плюсы таблиц заканчиваются, и начинаются проблемы при вёрстке. Во первых - не всегда возможна реализация респонзивного дизайна.
Во вторых большое количество тегов, что значительно увеличивает размер HTML. Альтернативой, является вёрстка с использованием блочных элементов DIV. Используя CSS 1-2 приходиться приложить не мало труда, для того чтобы блоки стали одной высоты, чтобы контент разной длины равномерно растягивал DIV.
CSS3 принёс много нововведений, и я расскажу о использовании функции column-count множественные столбцы. Эта функция позволит создать столбцы используя только блоки DIV, и очень значительно сократит HTML.
Пример:
Имеется некий контент
<div id="Container"> Не следует, однако забывать, что сложившаяся структура организации в значительной степени обуславливает создание существенных финансовых и административных условий. Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании новых предложений. Значимость этих проблем настолько очевидна, что постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности представляет собой интересный эксперимент проверки форм развития. Значимость этих проблем настолько очевидна, что сложившаяся структура организации в значительной степени обуславливает создание соответствующий условий активизации. </div>
Разделим его на два столбца:
#Container { -moz-column-count: 2; /* Для Firefox */ -webkit-column-count: 2; /* Для Safari и Chrome */ column-count: 2; }
В результате получилось:
Немного оформить стилями границы:
#Container { -webkit-column-count: 2; /* Для Safari и Chrome */ -webkit-column-rule: 1px solid #000000; -webkit-column-gap: 100px; -moz-column-count: 2; /* Для Firefox */ -moz-column-rule: 1px solid #000000; -moz-column-gap: 100px; column-count: 2; column-rule: 1px solid #000000; column-gap: 100px; }
В результате получаем столбцы одной высоты и с автоматической разбивкой контента.
Итак минимум HTML минимум CSS - получился многоколоночный макет. Единственный минус это кросбраузерность свойства column-count,column-width и column-gap понимают далеко не все браузеры.
Более подробно о многоколоночных макетах можно почитать на http://www.w3.org/TR/css3-multicol/#column-count.
- Войдите, чтобы оставлять комментарии
- 1 просмотр