columns語法：columns：[ column-width ] || [ column-count ]
設置或檢索對象的列數和每列的寬度

其中：[ column-width ]：設置或檢索對象每列的寬度；[ column-count ]：設置或檢索對象的列數。

css代碼：

body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size:16px;} .test{width:628px;border:10px solid #000;-moz-columns:200px 3;-webkit-columns:200px 3;columns:200px 3; } .test2{border:10px solid #000;-moz-columns:200px;-webkit-columns:200px;columns:200px; }

?

html代碼：

<h1>列數及列寬固定:</h1> <div class="test"><p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p><p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列寬固定，根據容器寬度液態分布列數:</h1> <div class="test2"><p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p><p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div>

?

結果如圖所示：

以下列出column運用的相關屬性
1.column-width：<length> | auto?設置或檢索對象每列的寬度?
如：-moz-column-width:200px;

2.column-count：<integer> | auto?設置或檢索對象的列數
如：-webkit-column-count:3;

3.column-gap：<length> | normal?設置或檢索對象的列與列之間的間隙
如：column-gap:normal;column-gap:40px;

4.column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]設置或檢索對象的列與列之間的邊框。復合屬性。相當于border屬性
如：column-rule:10px solid #090;

5.column-span：none | all?設置或檢索對象元素是否橫跨所有列。
如：column-span:all;

6.column-fill：auto | balance?設置或檢索對象所有列的高度是否統一。
auto：列高度自適應內容
balance：所有列的高度以其中最高的一列統一
如：column-fill:balance;

7.column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column?設置或檢索對象之前是否斷行。

auto：既不強迫也不禁止在元素之前斷行并產生新列
always：總是在元素之前斷行并產生新列
avoid：避免在元素之前斷行并產生新列

8.column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column?設置或檢索對象之后是否斷行。

auto：既不強迫也不禁止在元素之后斷行并產生新列
always：總是在元素之后斷行并產生新列
avoid：避免在元素之后斷行并產生新列

9.column-break-inside：auto | avoid | avoid-page | avoid-column?設置或檢索對象內部是否斷行。

auto：既不強迫也不禁止在元素內部斷行并產生新列
avoid：避免在元素內部斷行并產生新列

其實常用的也就前面5條。

來源:http://www.cnblogs.com/moqiutao/p/4817321.html

總結

以上是生活随笔為你收集整理的css3中的多列布局columns详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。