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