Создание столбцов используя DIV и CSS3. Многоколоночный макет.

При создании столбцов, как правило удобнее использовать таблицы. Явными преимуществами которых является: удобное выравнивание, одинаковая высота столбцов и растягивание под содержимое.

На этом плюсы таблиц заканчиваются, и начинаются проблемы при вёрстке. Во первых - не всегда возможна реализация респонзивного дизайна.

Во вторых большое количество тегов, что значительно увеличивает размер 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.

Оставить комментарий

Похожие материалы