文將針對(duì)CSS 3中的多欄布局做詳細(xì)介紹，使用多欄布局時(shí)只能為所有欄指定一個(gè)統(tǒng)一的高度，欄與欄之間的寬度不可能是不一樣的，另外也不可能具體指定什么欄中顯示什么內(nèi)容，因此比較適合使用在顯示文章內(nèi)容的時(shí)候，不適合用于安排整個(gè)網(wǎng)頁(yè)中由各元素組成的網(wǎng)頁(yè)結(jié)構(gòu)時(shí)。

1.首先我們先定義個(gè)div盒子

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

樣例圖片：

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

column-count屬性為一個(gè)數(shù)字表示列數(shù)，不帶單位，含義是將一個(gè)元素中的內(nèi)容分為多欄進(jìn)行顯示。

樣例代碼：

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

樣例圖片：

?

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

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

樣例代碼：

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

樣例圖片：

?

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

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

樣例代碼：

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

樣例圖片：

?

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

column-width可以設(shè)置每一欄的寬度，但是在實(shí)際測(cè)試中發(fā)現(xiàn)并不像描述的那么簡(jiǎn)單，遂列舉出以下幾個(gè)問題

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。