中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用CSS3可以為你的網(wǎng)站創(chuàng)建多列，而不用為每列制定特定的層或段落。

與多背景圖片一樣，CSS3多列也是我最喜愛(ài)的一個(gè)技術(shù)。我想這條CSS3屬性有在報(bào)紙和雜志布局中以外的很多潛在的用途。如果你在某個(gè)想法或個(gè)人網(wǎng)站中使用了這種方法，請(qǐng)?jiān)谙旅娴脑u(píng)論中提交你的鏈接，我很高興能確認(rèn)這種方法能用于很多中布局中。

跨瀏覽器兼容性：

比較好的支持CSS3多列的瀏覽器有Firefox、Safari、Google Chrome，這樣我們就需要使用-moz和-webkit前綴了。

CSS3多列(寬度)

上面的截圖是使用了下面的CSS3樣式的效果：

#multiColumnWidth {
 text-align: justify;
 -moz-column-width: 20em;
 -moz-column-gap: 2em;
 -webkit-column-width: 20em;
 -webkit-column-gap: 2em;
}

瀏覽器支持：

• √ Firefox(3.05+…)
• √ Google Chrome(1.0.154+…)
• √ Google Chrome(2.0.156+…)
• × Internet Explorer(IE7, IE8 RC1 )
• × Opera(9.6+…)
• √ Safari(3.2.1+ windows…)

CSS3多列(列數(shù))

上面的截圖是使用了下面的CSS3樣式的效果：

#multiColumnCount {
 text-align: justify;
 -moz-column-count: 3;
 -moz-column-gap: 1.5em;
 -moz-column-rule: 1px solid #dedede;
 -webkit-column-count: 3;
 -webkit-column-gap: 1.5em;
 -webkit-column-rule: 1px solid #dedede;
}

瀏覽器支持：

• √ Firefox(3.05+…)
• √ Google Chrome(1.0.154+…)
• √ Google Chrome(2.0.156+…)
• × Internet Explorer(IE7, IE8 RC1 )
• × Opera(9.6+…)
• √ Safari(3.2.1+ windows…)

本節(jié)原文：
http://www.zenelements.co.uk/blog/css3-multiple-columns

特別聲明，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate fromZen Elements, thanks Alex for his great work so much.

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁(yè) 背景圖片(背景大小和多背景圖) 下一頁(yè) 嵌入字體/網(wǎng)絡(luò)字體

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。