使用CSS3可以為你的網站建立多列，而不用為每列制定特定的層或段落。

與多背景圖片一樣，CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法，請在下面的評論中提交你的連結，我很高興能確認這種方法能用於很多中佈局中。

跨瀏覽器相容性：

比較好的支援CSS3多列的瀏覽器有Firefox、Safari、Google Chrome，這樣我們就需要使用-moz和-webkit字首了。

CSS3多列(寬度)

上面的截圖是使用了下面的CSS3樣式的效果：

#multiColumnWidth { 
    text-align: justify; 
    -moz-column-width: 20em; 
    -moz-column-gap: 2em; 
    -webkit-column-width: 20em; 
    -webkit-column-gap: 2em; 
    column-width: 20em; 
    column-gap: 2em; 
}
 

瀏覽器支援：

• Firefox 4+
• Google Chrome 3+
• Internet Explorer 10+
• Safari 3.2.1+

CSS3多列(列數)

上面的截圖是使用了下面的CSS3樣式的效果：

#multiColumnCount { 
    text-align: justify; 
    -moz-column-count: 3; 
    -moz-column-gap: 1.5em; 
    -moz-column-rule: 1px solid #dedede; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 1.5em; 
    -webkit-column-rule: 1px solid #dedede; 
    column-count: 3; 
    column-gap: 1.5em; 
    column-rule: 1px solid #dedede; 
}
 

瀏覽器支援：

• Firefox 4+
• Google Chrome 3+
• Internet Explorer 10+
• Safari 3.2.1+

CSS3系列教程|前端觀察

特別宣告，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.