CSS columns 多列布局

admin發表於2019-05-28
CSS

本文並不會對多列布局的技術細節做介紹，而是從總體上介紹一下它的作用。

多列布局早就存在，並且應用非常的頻繁，比如一個頁面分為三列布局。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222649w1ss285tll5r3d7d.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示中，頁面的主體部分採用三列布局效果。

CSS3之前，實現上述效果主要通過浮動或者兩位兩種方式，通過CSS3新增的多列布局屬性，可以在很多場景下比較輕鬆的實現多列布局。下面羅列兩種比較常見的對多列布局屬性的應用。

（1）.文字多列顯示：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222707tdntnt222ad60cld.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述佈局可以參閱CSS column-span一章節。

（2）.瀑布流佈局：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222724y5tam5qtqeg7zqqq.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述佈局可以參閱CSS columns多列布局瀑布流一章節。

相關閱讀：

（1）.CSS columns 屬性一章節。

（2）.CSS column-span 屬性一章節。

（3）.CSS column-gap 屬性一章節。

（4）.CSS column-rule 屬性一章節。

（5）.CSS3 column-count 屬性一章節。

（6）.CSS3 column-width 屬性一章節。

相關文章