Привет верстальщикам!) Что-то я давненько не писал по поводу 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;
В итоге получаем такой вид:
Все просто! Можете посмотреть DEMO-страничку, чтобы увидеть, как это работает.
А еще есть свойство "column-rule", оно вставляет вертикальный разделитель между столбцами. Я считаю, что оно не всегда надо, потому и не включил в свой пример, но знать о нем надо, это бесспорно:
column-rule:1px solid #000000;
На данный момент “multi-column” работает в Chrome, Safari и Firefox. Более детально об этом свойстве можно узнать на w3.org.
Подписывайтесь на RSS и узнавайте больше о новых возможностях CSS3.
И кстати, отличный блог веб-разработчика! Можно найти много чего интересного по CSS. Советую почитать 
Если нужна аренда серверов для Ваших сайтов, обратите внимание на предложения Sartelekom.
ФИ: Михайленко Олег.
Классная штука, осталось только придумать костыль для IE и будет счастье
Хехе, опера 10.5 с данным свойством в пролете. IE9, думаю, тоже (На ноут попробую поставить, скажу точно, хотя там только пре-пре-преальфа, так что хз, что будет к релизу…
А по поводу только хрома, сафари и огнелиса я бы не был так категоричен
Я знаю еще как минимум один браузер, который поддерживает эту верстку.
Я писал о популярных браузерах) Так что то, что это свойство может срабатывать на еще каком-то, я не учитывал)))
Если популярные браузеры, то при чем здесь Хром? Вся группа вбкит занимает в общем объеме не более 1%. Не в пример Опере с её 50% объёма, о которой здесь ни слова.
1%?
http://www.w3schools.com/browsers/browsers_stats.asp
[...] multi-column в CSS3 – многоколоночная верстка с CSS3 [...]
пока все браузеры не начнут поддерживать css3 смысла нет делать такую верстку, но удобно
Простите чайника, а для блога в ЖЖ это работает?
Если не сложно – если работает – не могли бы Вы описать процедуру)))
Спасибо)))
Если у Вас есть возможность изменять Ваш шаблон в ЖЖ, то можно применить это свойство
Нужно выбрать стиль контейнера, которой Вы хотите изменить и прописать туда свойства, которые я описал в посте.
Вам нужно открыть CSS файл (обычно это – style.css) Вашего шаблона и внести туда правки, где прописать это свойство
Учтите, что не все браузеры смогут отображать это свойство в действии, так как оно работает только в популярных браузерах, которые уже поддерживают CSS3.
Спасибо за оперативный ответ)))
Правда, в ЖЖ у меня один из стандартных чьих-то шаблонов, поэтому, как я понимаю, CSS-файл мне не открыть))) Да и туда правки я бы вряд ли смог, ибо не программист(((
В общем, я так понимаю, что мне в блоге не светит трехколонную версточку замутить… Жаль.
Спасибо еще раз)))
Ну, в ЖЖ править шаблон могут только платные аккаунты
Аааа… Значит, все-таки можно теоретически…
Спасибо)))
*пошел копить на платный аккаунт
Акки не дорогие)))
3$ в месяц или 19.95$ в год
спасибо! Уже выбрал минималистическую тему, но она будет модной!
с помошью цсс3