CSS3 column-count 屬性 · W3School CSS 參考手冊

# CSS3 column-count 屬性 ## 實例將 div 元素中的文本分為三列： ``` div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10 和 Opera 支持 column-count 屬性。 Firefox 支持替代的 -moz-column-count 屬性。 Safari 和 Chrome 支持替代的 -webkit-column-count 屬性。注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 column-count 屬性。 ## 定義和用法 column-count 屬性規定元素應該被劃分的列數。 | 默認值： | auto | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.columnCount=3 | | --- | --- | ## 語法 ``` column-count: _number_|auto; ``` | 值 | 描述 | 測試 | | --- | --- | --- | | _number_ | 元素內容將被劃分的最佳列數。 | [測試](/tiy/c.asp?f=css_column-count) | | auto | 由其他屬性決定列數，比如 "column-width"。 | [測試](/tiy/c.asp?f=css_column-count&p=7) | ## 親自試一試 - 實例 [Column-count](/tiy/t.asp?f=css3_column-count) 把 div 元素中的文本劃分為三列。 ``` <!DOCTYPE html> <html> <head> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注釋：</b>Internet Explorer 不支持 column-count 屬性。</p> <div class="newspaper"> 人民網北京2月24日電 (記者劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。此次國內成品油價格調整幅度，是按照現行國內成品油價格形成機制，根據國際市場油價變化情況確定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復蘇前景向好以及中東局勢持續動蕩等因素影響，國際市場原油價格先抑后揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美元和115美元以上。雖然近兩日價格有所回落，但國內油價掛鉤的國際市場三種原油連續22個工作日移動平均價格上漲幅度已超過4%，達到國內成品油價格調整的邊界條件。通知指出，這次成品油調價后，國家將按照已建立的補貼機制，繼續對種糧農民、漁業（含遠洋漁業）、林業、城市公交、農村道路客運（含島際和農村水路客運）等給予補貼。同時，為保證市場物價基本穩定，防止連鎖漲價，對與居民生活密切相關的鐵路客運、城市公交、農村道路客運（含島際和農村水路客運）價格不作調整。通知要求，中石油、中石化、中海油三大公司要組織好成品油生產和調運，保持合理庫存，加強綜合協調和應急調度，保障成品油供應。各級價格主管部門要加大市場監督檢查力度，依法查處不執行國家價格政策，以及囤積居奇、造謠惑眾、合謀漲價、搭車漲價等違法行為，維護正常市場秩序。 </div> </body> </html> ``` ## 相關頁面 CSS3 教程：[CSS3 多列](/css3/css3_multiple_columns.asp "CSS3 多列")