CSS3 Columns好用的分列式布局

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。CSS裡一直有一個讓我們頭疼的問題，就是建立布局很麻煩。當然，有很多方式，有很多技術都可以建立各種布局，但我們總覺得CSS裡應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3裡提供了一批新的建立列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調控，避免了很多麻煩。

CSS代碼

CSS3裡的column系列屬性提供了各種不同的功能，通過組合使用它們，你能得到相應的任何分欄式布局：

column-count: 列數目

column-gap: 各列之間間隙寬度

column-width: 建議寬度；未必會使用，瀏覽器基於此數值進行計算

column-rule-width：列之間分割線寬度

column-rule-style：列之間分割線風格

column-rule-color：列之間分割線示範

column-span: 允許一個元素的寬度跨越多列

column-fill: 分列方式

要想製作出一個漂亮的分列布局，你至少需要用到column-count和column-gap：

/* 3 列，每列之間10px間距 */ul.col-3 {

column-count: 3;column-gap: 10px;}

如果你想美化一下列之間的空隙，這也很簡單：

/* 3 列，每列之間10px間距 ，帶有金色的隔離線 */ul.col-3 {

column-count: 3;column-gap: 10px;column-rule: 1px solid #fc0;}

指定的元素還可以橫跨多列：

/* 以下面的HTML為例:

<div><h3>表頭!</h3><div>列 1</div><div>列 2</div><div>列 3</div><div>列 4</div><div>列 5</div><div>列 6</div><div>列 7</div><div>列 8</div><div>列 9</div><div>列 10</div><div>列 11</div><div>列 12</div></div>

*/div.col-3 {column-count: 3;column-gap: 5px;}div.col-3 h2 {column-span: all;text-align:center;background: #eee;}

非常的簡單，而且顯示結果完全符合我們的預期！

使用CSS3的columns製作頁面配置有很多優勢：你不需要計算寬度，你不需要擔心內容是否會撐破布局，這些數學問題系統都會幫你計算。還有一個，那就是清晰整潔的語義。

以上內容就是關於css3的columns製作頁面配置，希望對大家有協助。