047_CSS3多列
1. 通過CSS3, 您能夠創建多個列來對文本進行布局, 就像報紙那樣!
2. 新的多列屬性
3. column-count屬性
3.1. column-count 屬性規定元素應該被劃分的列數。
3.2. 默認值
3.3. 可能值
4.?column-gap屬性
4.1. column-gap屬性規定列之間的間隔。
4.2. 如果列之間設置了column-rule, 它會在間隔中間顯示。
4.3. 默認值
4.4. 可能值
5. column-rule屬性
5.1. column-rule屬性是一個簡寫屬性, 用于設置column-rule-width、?column-rule-style和column-rule-color屬性。
5.2. column-rule屬性設置列的寬度、樣式和顏色規則。
5.3. 語法
column-rule: column-rule-width column-rule-style column-rule-color;5.4. 默認值
5.5. 可能值
6. column-rule-color屬性
6.1. column-rule-color屬性規定列之間的顏色規則。
6.2. 默認值
6.3. 可能值
7.?column-rule-style屬性
7.1. column-rule-style屬性規定列之間的樣式規則。
7.2. 默認值
7.3. 可能值
8.?column-rule-width屬性
8.1. column-rule-width屬性規定列之間的寬度規則。
8.2. 默認值
8.3. 可能值
9. column-span屬性
9.1. column-span屬性規定元素應橫跨多少列。
9.2. 默認值
9.3. 可能值
10.?column-width屬性
10.1. column-width屬性規定列的寬度。
10.2. 默認值
10.3. 可能值
11. columns屬性
11.1. columns屬性是一個簡寫屬性, 用于設置列寬和列數。
11.2. 語法
columns: column-width column-count;11.3. 默認值
11.4. 可能值
12. 例子
12.1. 代碼
<!DOCTYPE html> <html><head><title>CSS3 多列</title><meta charset="utf-8" /><style type="text/css">.newspaper {width: 680px;background-color: green;columns: 200px 3;/*column-width: 200px;column-count: 3;*/column-gap: 40px;column-rule: 3px outset #ff0000;/*column-rule-width: 3px;column-rule-style: outset;column-rule-color: #ff0000;*/}h2 {column-span: all;}</style></head><body><div class="newspaper"><h2>汽、柴油價格</h2>人民網北京2月24日電 (記者 劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。此次國內成品油價格調整幅度，是按照現行國內成品油價格形成機制，根據國際市場油價變化情況確定的。去年11月16日國內成品油價格調整以來，受市場預期歐美經濟復蘇前景向好以及中東局勢持續動蕩等因素影響，國際市場原油價格先抑后揚，2月上旬WTI和布倫特原油期貨價格再次回升至每桶95美元和115美元以上。雖然近兩日價格有所回落，但國內油價掛鉤的國際市場三種原油連續22個工作日移動平均價格上漲幅度已超過4%，達到國內成品油價格調整的邊界條件。通知指出，這次成品油調價后，國家將按照已建立的補貼機制，繼續對種糧農民、漁業（含遠洋漁業）、林業、城市公交、農村道路客運（含島際和農村水路客運）等給予補貼。同時，為保證市場物價基本穩定，防止連鎖漲價，對與居民生活密切相關的鐵路客運、城市公交、農村道路客運（含島際和農村水路客運）價格不作調整。通知要求，中石油、中石化、中海油三大公司要組織好成品油生產和調運，保持合理庫存，加強綜合協調和應急調度，保障成品油供應。各級價格主管部門要加大市場監督檢查力度，依法查處不執行國家價格政策，以及囤積居奇、造謠惑眾、合謀漲價、搭車漲價等違法行為，維護正常市場秩序。</div> </body> </html>12.2. 效果圖
總結
以上是生活随笔為你收集整理的047_CSS3多列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 046_CSS3动画
- 下一篇： CSS 基本样式