在CSS3中,我們可以使用column屬性來將文本分成多欄顯示,這為網頁設計帶來了更多的可能性。
/* 規定分欄數 */ column-count: 3; /* 規定分欄寬度 */ column-width: 300px; /* 規定分欄之間的間距 */ column-gap: 20px; /* 規定分欄的規則性 */ column-rule: 2px solid #ccc;
以上是column屬性的基本用法,接下來我們來看一些實際應用。
首先是文章分欄,可以通過設置行高和段落間距來美化分欄效果。
.article { column-count: 2; column-gap: 40px; } .article p { line-height: 1.5em; margin-bottom: 20px; }
其次是照片墻分欄,可以通過設置列數和間距來實現。
.photo-wall { column-count: 4; column-gap: 10px; } .photo-wall img { width: 100%; }
最后是列表分欄,可以通過設置列表項的display屬性為inline-block來實現。
.list { column-count: 3; column-gap: 20px; } .list li { display: inline-block; width: 100%; margin-bottom: 10px; }
總的來說,column屬性為網頁設計帶來了更多的創意,但也需要注意兼容性問題,部分瀏覽器可能不支持。
上一篇code怎么新建css
下一篇cs5css中英文對照