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製作頁面佈局，希望對大家有幫助。

相關推薦：

怎麼用CSS3和JS做出上升的方塊動態背景

CSS3的主要功能應用

CSS3怎麼做響應式佈局

#

以上是CSS3 Columns好用的分列式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！