Многоколоночность



Для создания газетной верстки для статей - можно использовать много способов, с приходом css3 это становиться проще. Не нужно использовать враперы и дивы для колонок ... только css



Используем HTML5-тег article:


<article>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  
    amet tincidunt orci placerat in. Integer vitae consequat augue.  
  
    //и т.д.
</article>  



article
 {  
    -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:2;  
}  

При помощи свойства column-width можно задать колонкам необходимую ширину:

article {  
    -moz-column-width: 150px;  
    -webkit-column-width: 150px;   
    column-width: 150px;  
}  

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:



article {     
    -webkit-column-gap: 30px;  
    -moz-column-gap: 30px;  
    column-gap: 30px;  
}  

Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border.


article {  
    -moz-column-rule: 1px dotted #ccc;  
    -webkit-column-rule: 1px dotted #ccc;  
    column-rule: 1px dotted #ccc;  
}  


Свойство column-span работает аналогично с colspan в table, объединяя нужные колонки.

article h1 {  
    -webkit-column-span: all;  
    column-span:all;  
}  


отсюда http://habrahabr.ru/post/153955/
для старых браузеров http://www.csscripting.com/css-multi-column/

еще по теме http://www.interface.ru/home.asp?artId=29268

Комментарии