Warning:
This wiki has been archived and is now read-only.
Css3-multicol
介紹
多欄模型
多欄元素是指一個 ‘column-width’ 或 ‘column-count’ 屬性不為 ‘auto’ 的元素，這種元素會成為多欄排版的容器。
在傳統的 CSS 盒子模型中，一個元素的內容流進元素的內容盒。多欄排版引入了一種內容盒內容中間的新的容器，稱作欄盒。多欄元素的內容流進其欄盒之中。
多欄元素的欄盒在多欄元素中以「行」排列。與表格單元類似，一行中的欄盒照多欄元素的行內方向排列。欄寬是欄盒在行內方向的長度，欄高是欄盒在塊流方向的長度。一行中的所有欄盒有相同的欄寬，且一行中的所有欄盒有相同的欄高。在多欄元素的每一行裡，相鄰的欄盒以欄間隔區隔，欄間隔裡可能含有欄分隔線。同一行裡的所有欄間隔是相同的。同一行裡的所有出現的欄分隔線也是相同的 ― 欄間隔線只出現在兩邊的欄盒都有內容的時候。
在最簡單的情況下，一個多欄元素只含有一行欄盒，在這種情況下各個欄盒的高度與多欄元素內容盒的使用高度相等。若使用者代理將多欄元素分頁，每頁面限制了每一行的高度，且內容會在次一頁新的一行欄盒裡繼續 ― 頁面不將欄盒切開。當跨欄元素將多欄元素分開的時候的時候也有相同的效果：使用者代理會維持跨欄元素前面的欄盒內容的平橫並縮短欄盒到適合內容的高度。跨欄元素之後的內容流進新的一行欄盒。
設置欄盒的屬性／取值是不可能的。舉例來說，網頁作者不能設置某個欄盒的背景，且欄盒沒有邊距、邊界、邊框等等概念。
下面的多欄元素渲染樣本顯示了邊距（藍）、欄間隔（黃）與欄間隔線（綠）。藍色與黃色僅供說明，在實際的渲染中這些區域的顯示由背景決定。
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
Pqr stu vw xyz.
本規範使用範例文件的各種變化來闡釋本規範描述的各種屬性效果，以下是範例文件的原始碼：
<html>
<style type="text/css">
div {
column-width: 15em;
column-gap: 2em; /* 以黃色顯示 */
column-rule: 4px solid green;
padding: 5px; /* 以藍色顯示 */
}
p { margin: 0; padding: 0 }
img { display: none }
</style>
<body>
<div>
<p>Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
<img src=...>
def g hij
...
</div>
</body>
</html>
範例中的胡搞文字是英文字母的順序，用來展示文字如何從一個欄盒流到另一個。為簡化視覺效果，各範例的文字內容有些許的不同。在這個範例中，網頁作者用這些規則設置圖像的寬度：
img { display: block; width: 100% }
由於寬度的計算相對於欄盒，圖像的寬度與欄盒一樣：
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz.
多欄排版裡的浮動元素使用浮動元素所在的欄盒定位。
在這個範例中，下面的 CSS 片段指定了圖像的呈現方式：
img { display: block; float: right }
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g
hij klm
nopq
rs tuv
wxy x
yz. Ab
cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij klm nopqrs
tuv wxy z. Abc de fg
hi jklmno. Pqrstu vw
x yz. Abc def ghi jkl.
M nop qrst uv wx yz.
黑盒子表示圖像。
多欄元素建立 CSS 2.1 9.4 小節描述的塊格式化上下文。
設置在多欄元素的第一個子元素的頂邊界不會與多欄元素的邊界折疊。
本規範允許巢狀多欄元素，但是實作上可能存在實作相關的極限。