multi-column в CSS3

17
Март
2010

multi-column in css3 / многоколоночная верстка в css3

Привет верстальщикам!) Что-то я давненько не писал по поводу CSS3. Надо, кагбэ, исправляться) И я предлагаю Вашему вниманию очередное интересное свойство - многоколоночную верстку. Очень интересный фич, особенно для интернет изданий. Теперь нам не надо создавать много слоев и помещать туда текст, нужно всего лишь прописать количество колонок и их свойства на Ваш вкус :)

Demo multi-column CSS3

Давайте приступим к более детальному рассмотрению. Я напишу сразу весь набор правил вместе с хаками для популярных браузеров:

.mycontainer {
column-count:4;
column-gap:20px;
column-width:150px;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-width:150px;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-width:150px;
}

а теперь, по порядку:

Указываем количество столбцов:

column-count:4;

Расстояние между столбцами:

column-gap:20px;

Ширина столбца:

column-width:150px;

Хаки для популярных браузеров:

-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-width:150px;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-width:150px;

В итоге получаем такой вид:

multi-column in css3

Все просто! :)  Можете посмотреть DEMO-страничку, чтобы увидеть, как это работает.

А еще есть свойство "column-rule", оно вставляет вертикальный разделитель между столбцами. Я считаю, что оно не всегда надо, потому и не включил в свой пример, но знать о нем надо, это бесспорно:

column-rule:1px solid #000000;

На данный момент “multi-column” работает в ChromeSafari и Firefox. Более детально об этом свойстве можно узнать на w3.org.

Download (скачать) multi-column CSS3

Подписывайтесь на RSS и узнавайте больше о новых возможностях CSS3.

И кстати, отличный блог веб-разработчика! Можно найти много чего интересного по CSS. Советую почитать ;)

Если нужна аренда серверов для Ваших сайтов, обратите внимание на предложения Sartelekom.

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (14) к “multi-column в CSS3”

  1. fenris пишет:

    Классная штука, осталось только придумать костыль для IE и будет счастье =)

  2. gwer пишет:

    Хехе, опера 10.5 с данным свойством в пролете. IE9, думаю, тоже (На ноут попробую поставить, скажу точно, хотя там только пре-пре-преальфа, так что хз, что будет к релизу…
    А по поводу только хрома, сафари и огнелиса я бы не был так категоричен ;)
    Я знаю еще как минимум один браузер, который поддерживает эту верстку. :P

  3. [...] multi-column в CSS3 – многоколоночная верстка с CSS3 [...]

  4. axel пишет:

    пока все браузеры не начнут поддерживать css3 смысла нет делать такую верстку, но удобно

  5. Николай пишет:

    Простите чайника, а для блога в ЖЖ это работает?
    Если не сложно – если работает – не могли бы Вы описать процедуру)))
    Спасибо)))

    • Oleg Mykhailenko пишет:

      Если у Вас есть возможность изменять Ваш шаблон в ЖЖ, то можно применить это свойство :)
      Вам нужно открыть CSS файл (обычно это – style.css) Вашего шаблона и внести туда правки, где прописать это свойство :) Нужно выбрать стиль контейнера, которой Вы хотите изменить и прописать туда свойства, которые я описал в посте.

      Учтите, что не все браузеры смогут отображать это свойство в действии, так как оно работает только в популярных браузерах, которые уже поддерживают CSS3.

  6. Николай пишет:

    Спасибо за оперативный ответ)))
    Правда, в ЖЖ у меня один из стандартных чьих-то шаблонов, поэтому, как я понимаю, CSS-файл мне не открыть))) Да и туда правки я бы вряд ли смог, ибо не программист(((
    В общем, я так понимаю, что мне в блоге не светит трехколонную версточку замутить… Жаль.
    Спасибо еще раз)))

  7. Николай пишет:

    Аааа… Значит, все-таки можно теоретически…
    Спасибо)))
    *пошел копить на платный аккаунт

  8. Romacho пишет:

    спасибо! Уже выбрал минималистическую тему, но она будет модной! 8) с помошью цсс3