webkit 20px groov ini vol cti 內容 style none

css3多列能夠創建多個列來對文本進行布局，就想報紙那樣。

關於多列的相關屬性及屬性值如下：

column-count: number|auto;：指定元素應分為的列數。
column-fill: 指定如何填充列
balance：(默認)列的高度盡量均衡
auto： 順序填充內容高度可能差距很大。

column-gap: 指定列之間的間距。
length： 一個指定的長度，將設置列之間的差距
normal： (默認值)W3C建議1em值

column-rule-color：指定列之間的顏色規則。

column-rule-style：指定列之間的樣式規則。
none： (默認)定義沒有規則。

hidden: 定義隱藏規則。
dotted: 定義點狀規則。
dashed: 定義虛線規則。
solid: 定義實線規則。
double: 定義雙線規則。
groove：列之間的分隔線顯示為內陷浮雕效果。
ridge： 列之間的分隔線顯示為外凸浮雕效果。
inset： 列之間的分隔線顯示為內斜面效果。
outset：列之間的分隔線顯示為外斜面效果。

column-rule-width: 指定列之間的寬度。
thin： 指定一個細邊框的規則
medium: (默認)定義一個中等邊框規則
thick: 指定一個粗邊框的規則
length: 指定具體長度寬度

column-rule：上面三個屬性的簡寫。指定列之間的規則：寬度，樣式和顏色。

語法：
column-rule: column-rule-width屬性值 column-rule-style屬性值 column-rule-color屬性值;

column-span: 指定某個元素應該跨越多少列.
1: (默認)元素應跨越一列
all: 該元素應該跨越所有列

column-width: 指定列的寬度.
auto: (默認)瀏覽器將決定列的寬度
length: 指定列寬的長度

Columns:一個速記屬性設置列寬和列數。
columns: column-width屬性值 column-count屬性值;

CSS代碼

div.newspaper
{
    /*為了減少代碼量，就沒寫-webkit-、-moz-等瀏覽器支持
 
*/
    height:500px;
    column-count:3;
    column-gap: 40px;
    column-fill: auto;
    column-rule-style: solid;
    column-rule-width: 20px;
    column-rule-color: #117DC3;
    column-width: 400px;
}
h1{
    font-size: 20px;
    column-span: all;
}
section{
    margin:10px 20px;
}

HTML代碼

1 <div class="newspaper">
2 　　<h1>這是標題這是標題這是標題這是標題這是標題這是標題這是標題這是標題這是標題這是標題這是標題這是標題</h1>
3 　　<!--這裏是很多文本。-->
4 　　<section>
5 　　Lorem ipsum dolor sit amet, ~此處省略~ voluptate assumenda dolore minima accusamus eos delectus nostrum laborum. Fuga id cumque autem eum deleniti reiciendis?</section>
6 </div>

顯示樣式：

原文參考：https://blog.csdn.net/wlk2064819994/article/details/79857964

css3新增屬性：多列(column)