CSS 3列(等高文本列)
阿新 • • 發佈:2017-10-26
ilo gap 空間 瀏覽器 文本 規則 處理方式 solid css
css 3可以創建等高文本列,通過column-count、column-width、column-gap屬性實現。假設標記如下:
<h1>Socrates</h1>
<div class="col">
<p>After philosophizing for a while......</p>
</div>
下面的規則創建一個三列布局,每列的寬度為14em,列之間有2em的間距。CSS列的優點之一是在可用的空間小於已定義列的寬度時的處理方式,列不會像使用浮動時那樣回繞,而是會減少列數,因此,如果空間不夠顯示三列,就會減少到兩列。
.col { -moz-column-count: 3; -moz-column-width: 14em; -moz-column-gap: 2em; -moz-column-rule: 1px solid #ccc; -webkit-column-count: 3; -webkit-column-width: 14em; -webkit-column-gap: 2em; -webkit-column-rule: 1px solid #ccc; }
可以發現瀏覽器對CSS列的支持還不廣泛,因此,除了常規代碼,還需要使用特定於瀏覽器相關的擴展。
CSS 3列(等高文本列)