武林網(www.companysz.com)文章簡介:使用CSS3可以為你的網站創建多列,而不用為每列制定特定的層或段落。
使用CSS3可以為你的網站創建多列,而不用為每列制定特定的層或段落。
上一篇文章:CSS3教程(5):網頁背景圖片
與多背景圖片一樣,CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜志布局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法,請在下面的評論中提交你的鏈接,我很高興能確認這種方法能用于很多中布局中。
跨瀏覽器兼容性:
比較好的支持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;}瀏覽器支持:
CSS3多列(列數)上面的截圖是使用了下面的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;}瀏覽器支持:
新聞熱點
疑難解答