column

有一組新的 CSS 屬性可以幫你輕鬆的實現多欄文字的版面配置。你看:

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}
<div class="three-column">
天布麼次,今親他利用或母電氣能真友老久來進登出總形:國大系思樂麼問做去將地樹作、維你我們,師為什那,會輕步省生一們些的間海學了;能大作以電回球地現廠美馬方,別到最刻親個神故靜西招國老北氣反大育發商告味必資始定可對謝度的!找謝對環的片他這下:母來感從還,叫我火教會經神送兒沒業是地場色是身收但進經道。媽兒們有先他怕雖發形的手最出在個是我不引最引現小企是而?一子很及女種走?他傳樣會當工視各過男二年傳,但式希叫裡上優經的友定你……不前空國會世解,也斯他不體裡一光車別?加去命最點著如推著人所間國作感我觀,可場是過入指待說,理求面輕美事福出過白到片不是的快究是漸片力男創北一落我成不,精能等動張色輪酒、吃理站毒上出一,黃時回趣吃然,意小童提,到苦際一出如遊軍現媽濟手喜……現結從過計不太聞經是她!變連事成通,中財陸呢十母裝有他成綠上童不個。
</div>

CSS3 Multiple Columns 是很新的標準,所以你需要使用前綴,並且它不支援 IE9 以下和 Opera Mini 版本。還有許多和 cloumn-* 相關的屬性,點擊這裡瞭解更多。否則讓我們進入下一個主題。

  • Creative Commons License