DIV CSS 佈局教程網

一、CSS3多列布局

在CSS3推出之前，如果想要設計類似報紙那樣的多列布局，一般有2種方式可以實現：（1）浮動布局；（2）定位布局。但是這兩種方式都有自身的弊端所在。其中，浮動布局比較靈活，但容易發生錯位。而定位布局可以精准定位，卻無法滿足模塊的適應能力。

CSS3多列布局

為了解決多列布局的難題，CSS3中新增了多列布局的布局方式。使用CSS3多列布局，可以讓我們輕松地實現類似報紙、雜志那樣的多列的布局，而且自適應能力非常好。

多列布局的應用很廣泛，利用CSS3多列布局甚至可以實現我們常見的“瀑布流布局”！

CSS3多列布局實現的瀑布流

CSS3多列布局屬性 屬性值 說明 column-count 定義多列布局的列數 column-width 定義多列布局每一列的寬度 column-gap 定義兩列之間的間距 column-rule 定義兩列之間邊框樣式 column-span 定義跨列樣式

注意：這一章同樣建議大家使用chrome浏覽器（-webkit-前綴）學習，避免站長寫過多的兼容代碼。

在接下來的課程裡，我們一一為大家詳細介紹這些CSS多列布局屬性。