CSS columns 多列布局

admin發表於2019-05-28

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

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

簡單圖示如下:

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 屬性一章節。

相關文章