1、多列布局——Columns
爲了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局,W3C特意給CSS3增加了一個多列布局模塊(CSS Multi Column Layout Module)。它主要應用在文本的多列布局方面,這種布局在報紙和雜志上都使用了幾十年了,但要在Web頁面上實現這樣的效果還是有相當大的難度,CSS3的多列布局可以輕松實現。
語法:
columns:<column-width> || <column-count>
多列布局columns屬性參數主要就兩個屬性參數:列寬和列數。
參數:
<column-width>主要用來定義多列中每列的寬度
<column-count>主要用來定義多列中的列數
舉例:要顯示2欄顯示,每欄寬度爲200px,代碼爲:
columns: 200px 2;
到目前爲止大部分主流瀏覽器都對其支持:

index.html代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="columns">
<h2>我要分列顯示</h2>
<p>
爲了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局,W3C特意給CSS3增加了一個多列布局模塊(CSS Multi Column Layout)。它住喲應用在文本的多列布局方面,對於文本的多列布局,我想大家並不陌生因爲報紙和雜志上我們隨處可見,這種布局在報紙和雜志上都使用了幾十年了,但需要在Web頁面上實現文本的多列布局,正如下圖所示。
</p>
<p>
爲了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局,W3C特意給CSS3增加了一個多列布局模塊(CSS Multi Column Layout)。它住喲應用在文本的多列布局方面,對於文本的多列布局,我想大家並不陌生因爲報紙和雜志上我們隨處可見,這種布局在報紙和雜志上都使用了幾十年了,但需要在Web頁面上實現文本的多列布局,正如下圖所示。
</p>
</div>
</body>
</html>
style.css代碼:
.columns{
width:500px;
padding:5px;
border:1px solid red;
margin:20px auto;
-webkit-columns:150px 3;
-moz-columns:150px 3;
-o-columns:50px 3;
-ms-columns:150px 3;
columns:150px 3;
}
2、多列布局——column-width
column-width的使用和CSS中的width屬性一樣,不過不同的是,column-width屬性在定義元素列寬的時候,既可以單獨使用,也可以和多列屬性中其他屬性配合使用。
基本語法如下所示:
column-width: auto | <length>
取值說明:
| 屬性值 | 說明 |
| auto | 如果column-width設置爲auto或者沒有顯示的設置值時,元素多列的列寬將由其他屬性來決定,比如前面的示例就是由列數column-count來決定。 |
| <length> | 使用固定值來設置元素列的寬度,其主要是由數值和長度單位組成,不過其值只能是正值,不能爲負值。 |