文將針對CSS 3中的多欄布局做詳細介紹，使用多欄布局時只能為所有欄指定一個統一的高度，欄與欄之間的寬度不可能是不一樣的，另外也不可能具體指定什么欄中顯示什么內容，因此比較適合使用在顯示文章內容的時候，不適合用于安排整個網頁中由各元素組成的網頁結構時。

1.首先我們先定義個div盒子

<style> .box {width: 600px;background-color: #ddd; } </style> <div class="box">我愛北京天安門，天安門上太陽升，偉大領袖毛主席，指引我們向前進！。。</div>

樣例圖片：

2.使用多欄布局第一個屬性：column-count

column-count屬性為一個數字表示列數，不帶單位，含義是將一個元素中的內容分為多欄進行顯示。

樣例代碼：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2; } </style>

樣例圖片：

?

3.使用多欄布局的第二個屬性：column-gap

使用column-gap屬性來設定多欄之間的間隔距離。

樣例代碼：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px; } </style>

樣例圖片：

?

4.使用多欄布局第3個屬性：column-rule

column-rule屬性在欄與欄之間增加一條間隔線，并且設定該間隔線的寬度、樣式、顏色，該屬性的指定方法與css中的border屬性指定方法相同。

樣例代碼：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;column-rule: 5px dashed #000; } </style>

樣例圖片：

?

5.使用多欄布局最后一個屬性：column-width

column-width可以設置每一欄的寬度，但是在實際測試中發現并不像描述的那么簡單，遂列舉出以下幾個問題

在設定column-width的同時必須設置盒子的width，否則盒子寬度默認為100%，每欄寬度按照欄數平均分。

盒子每欄寬度必須大于等于column-width設定的值，否則就會減少欄數來增加每欄寬度，例如盒子寬度400px，一共2欄，那么每欄寬度就是200px，如果設置column-width: 210px的話盒子就會變成1欄以保證每欄寬度大于等于column-width:210px;，但是如果每欄寬度大于column-width的值時每欄寬度也不會強制等于column-width，這么看column-width的個性有點像min-width。

總結

以上是生活随笔為你收集整理的CSS3属性之多栏布局column的全部內容，希望文章能夠幫你解決所遇到的問題。

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