如果會(huì)看報(bào)紙你一定會(huì)看到很多多列顯示文本的效果檀夹，那么在網(wǎng)頁(yè)布局中有沒(méi)有什么方便的方法可以實(shí)現(xiàn)這個(gè)效果呢骡男？
首先介紹一下css中關(guān)于多列的屬性：
css中關(guān)于多列的屬性
有的屬性看描述我們能一眼明了判导，接下來(lái)我將其中幾個(gè)我需要查找資料來(lái)多多了解的屬性分享一下
column-fill：
| 值 | 說(shuō)明 |
|---|---|
| balance | 列長(zhǎng)短平衡稽亏。瀏覽器應(yīng)盡量減少改變列的長(zhǎng)度 |
| auto | 列順序填充疙筹，他們將有不同的長(zhǎng)度 |
column-rule-style:
| 值 | 說(shuō)明 |
|---|---|
| none | 定義沒(méi)有規(guī)則 |
| hidden | 隱藏 |
| dotted | 定義點(diǎn)狀規(guī)則 |
| dashed | 定義虛線規(guī)則 |
| solid | 定義實(shí)線規(guī)則 |
| double | 定義雙線規(guī)則 |
| groove | 定義 3D grooved 規(guī)則富俄。該效果取決于寬度和顏色值 |
| ridge | 定義 3D ridged 規(guī)則禁炒。該效果取決于寬度和顏色值 |
| inset | 定義 3D inset 規(guī)則。該效果取決于寬度和顏色值 |
| outset | 定義 3D outset 規(guī)則霍比。該效果取決于寬度和顏色值 |
如果我這樣設(shè)置
column-rule: 10px outset #EBCCCC;
groove.png
ridge.png
inset.png
outset.png
column-rule-width:
| 值 | 說(shuō)明 |
|---|---|
| thin | 指定一個(gè)細(xì)邊框的規(guī)則（默認(rèn)細(xì)邊框） |
| medium | 定義一個(gè)中等邊框規(guī)則（默認(rèn)中等邊框） |
| thick | 指定一個(gè)粗邊框的規(guī)則（默認(rèn)粗邊框） |
| length | 指定寬度的規(guī)則（指定高度值） |
column-span:
| 值 | 說(shuō)明 |
|---|---|
| 1 | 元素應(yīng)跨越一列 |
| all | 該元素應(yīng)該跨越所有列 |
示例：
Demo happy-day
HTML代碼：
<div>
<h2>開(kāi)心的日子</h2>
這是一個(gè)值得慶祝的日子幕袱，這是一個(gè)值得說(shuō)道的日子，這是一個(gè)萬(wàn)眾矚目的日子悠瞬，所有的一切都是值得肯定的凹蜂，今天我們歡聚一堂，在所有人的見(jiàn)證下迎來(lái)了新的一天阁危，在這里我衷心的祝愿所有人都能心想事成玛痊。
不得不說(shuō)雖然這是一個(gè)陰雨的日子，但是我的心中卻充滿了喜悅狂打。
</div>
CSS代碼：
div{
column-count: 3;
column-rule: 10px outset #EBCCCC;
column-rule-width: length;
}
div h2{
text-align: center;
column-span: all;
}
好啦擂煞，所有的屬性都介紹完畢啦，現(xiàn)在開(kāi)始試著排版一篇自己寫(xiě)的小文章吧!
