CSS3属性之多栏布局column
生活随笔
收集整理的這篇文章主要介紹了
CSS3属性之多栏布局column
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文將針對(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è)問題
總結(jié)
以上是生活随笔為你收集整理的CSS3属性之多栏布局column的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CSS3实践之路(六):CSS3的过渡效
- 下一篇: css3教程:弹性盒模型