[前言]
會有這種模組是因為大家都喜歡把長文章切成等高等寬的column方便閱讀。以前要做就只有用div+js而且要算字數，十分麻煩。現在則有CSS3 Multiple Columns代勞
基本上mozilla和webkit系的都有一定程度的支援...IE就算了吧 (見未段)
*本文的欄=column，用字會在這兩者換來換去
[示範]
是不容有異議，他倆已經忘卻了一切，忽然地顛蹶，有時再往親戚家去，多亂惱惱地熱鬧著，管他做甚？但是他倆竟會自己走到橋上，進來的人說，不趕他出去，想因為腳有些疲軟，也要計算他一年的成績，死鴨子的嘴吧，再鬧下去，只當是前進中一程必經之路，自然不曉得地球是遵著軌道，在這時候，他不自禁地踴躍地走向前去，實在是無意義的競爭，連生意本，這是如何的決意！一邊就可省節六、七百塊，就使我發生了許多疑問，經過幾許途程，孩子們得到指示，當科白尼還未出世，在這次血祭壇上，卻不能稍超興奮，在環繞太陽運轉，一個有年紀的人，擋不住大的拳頭，在這次血祭壇上，這是多麼感慨的話啊！故過年的規定遂各不同，自然忘記他們行程的遠近，早幾點鐘解決，只是前進，旗鼓的行列，放射到地平線以外，自然不曉得地球是遵著軌道，先先後後，僅七、八歲時的狀況，在閃爍地放亮。漸被遮蔽，溺人的水窪，有的人，放射到地平線以外，一勺冰水，甲興奮地說，驟然受到光的刺激，有的孩子不平地在罵著叫喊著。籠罩著街上的煙，過年，蹧躂人！
[Code]
CSS:
#more-multi-col {
width: 400px;
-moz-column-count: 2;
-webkit-column-count: 2;
-o-column-count: 2;
-ms-column-count: 2;
}
HTML:
<div id="more-multi-col">
<!-- 就只有文字 ，別人會加 <p> 不過我太懶就算了 -->
</div>看，很簡單吧? (除了那一大串vendor prefix...)
[說明]
如果你只需切開文字至特定欄數，那麼你要用的就只有column-count去指定要切的欄數。
然而這個module容許你用column-width去指定欄寬，瀏覽器會去計算實際欄數。
(一般情形你只需用其中一個，兩個都指定是可以，瀏覽器會計數)
另外可以自定的元素是column-gap和column-rule。在上面的報章示範下方有看到column之間的線嗎? 那個叫rule (w3c: column rule)；而在column與column之間的空白地區叫gap(w3c: column gap)。Rule可以用column-rule去改變一定程度的外觀，Gap則可用column-gap去調整寬度。
= Mozilla 和 Webkit專用demo =
是不容有異議，他倆已經忘卻了一切，忽然地顛蹶，有時再往親戚家去，多亂惱惱地熱鬧著，管他做甚？但是他倆竟會自己走到橋上，進來的人說，不趕他出去，想因為腳有些疲軟，也要計算他一年的成績，死鴨子的嘴吧，再鬧下去，只當是前進中一程必經之路，自然不曉得地球是遵著軌道，在這時候，他不自禁地踴躍地走向前去，實在是無意義的競爭，連生意本，這是如何的決意！一邊就可省節六、七百塊，就使我發生了許多疑問，經過幾許途程，孩子們得到指示，當科白尼還未出世，在這次血祭壇上，卻不能稍超興奮，在環繞太陽運轉，一個有年紀的人，擋不住大的拳頭，在這次血祭壇上，這是多麼感慨的話啊！故過年的規定遂各不同，自然忘記他們行程的遠近，早幾點鐘解決，只是前進，旗鼓的行列，放射到地平線以外，自然不曉得地球是遵著軌道，先先後後，僅七、八歲時的狀況，在閃爍地放亮。漸被遮蔽，溺人的水窪，有的人，放射到地平線以外，一勺冰水，甲興奮地說，驟然受到光的刺激，有的孩子不平地在罵著叫喊著。籠罩著街上的煙，過年，蹧躂人！
[注意事項]
Column Break
預設情況下瀏覽器是會就實際需要去切割內容，這個行為稱為break (w3c: column break)，而可切割的基本上為一切inline/inline-box的元素－也就是說，<img> 照切無誤...
因為和分頁情況相似，於是w3c加入了和page-break-*近乎一模一樣的column-break-*去解決問題 (* = before, after, inside)，理論上下面的CSS可以解決圖片切開的問題:
p { break-inside: avoid-column }
(by w3c, multiple column Example XIX，vendor-prefix自加)不過Mozilla不支援這個orz，詳細自己去爬spec...[ CSS Multi-column Layout Module: column-breaks ]
*說起圖片這個module可威了－width 100% = column width、float會做文繞圖 (Spec: Example IX & X、太長的圖片會clip...Spec: Example XXI
Column Span
看報紙不是有跨欄小標題出現嗎? w3c spec容許某個元素橫跨數欄－而會其他欄會穿過它的content會被壓下一行(或更多，視該跨欄元素有多高)繼續。例如想將h2變成跨爛元素可以這樣設定:
h2 { column-span: all; }
*column-span只有1或all－一是安守本份 (1)、一是全跨(all)，沒有中間不過目前只有Chrome支援( ._.)
Column Fill
預設情況下瀏覽器會平衡欄高－也就是說，column container有可能用不完整頁/可用的高度而出現不想要的留白 (把有色/textile背景設在column container時的大忌...不過本身不應該這樣做啊?)。column-fill [balance | auto] 可以改變這個行為－預設是balance，auto則是先自動填滿一欄再繼續
不過沒有人支援...
文字方向
Demo就只看過用橫排的...直排沒見過 (而且也不太好讀)
[瀏覽器支援]
Mozilla Support
- -moz-column-width
- -moz-column-count
- -moz-column-gap
- -moz-column-rule
- -moz-column-rule-width
- -moz-column-rule-style
- -moz-column-rule-color
Safari Support
- -webkit-column-width
- -webkit-column-count
- -webkit-column-gap
- -webkit-column-rule
- -webkit-column-rule-color
- -webkit-column-rule-style
- -webkit-column-rule-width
- -webkit-column-rule
- -webkit-column-break-after
- -webkit-column-break-before
- -webkit-column-break-inside
- -webkit-columns
Chrome 8
- -webkit-column-width
- -webkit-column-count
- -webkit-column-gap
- -webkit-column-rule-color
- -webkit-column-rule-style
- -webkit-column-rule-width
- -webkit-column-span
- -webkit-column-break-after
- -webkit-column-break-before
- -webkit-column-break-inside
大致上大家都支援
基本
- column-width
- column-count
Gap and Rules
- column-gap
- column-rule-color
- column-rule-style
- column-rule-width
IE 9...看似沒有，要等RC實測。
(有人說webkit和mozilla本援column-fill，不過doc我找不到...?)
[小結]
基本上是很好用的模組－比起grid和template module是沒有那麼強大，不過其自動化已讓人輕鬆不少...
只要不拿multi-column當grid用，一切都會很美好...
(margin, position:relative 都有可能造成麻煩，請小心使用)
[Reference]
- An (Almost) Complete Guide to CSS3 Multi-column Layouts
- CSS3 Series: Multiple Columns
- 良好示範: css3 multiple columns
這個column做工整是因為用了text-align:justify
沒有留言:
張貼留言