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> | 使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能爲負值。 |
