Design Code 設計密碼

通過CSS3，您能夠創建多個列來對文本進行佈局- 就像報紙那樣！

• column-count
• column-gap
• column-rule

瀏覽器支持

Internet Explorer 10 和Opera 支持多列屬性。

Firefox 需要前綴-moz-。

Chrome 和Safari 需要前綴-webkit-。

註釋： Internet Explorer 9以及更早的版本不支持多列屬性。

CSS3 創建多列

column-count 屬性規定元素應該被分隔的列數：

實例

把div 元素中的文本分隔為三列：

div
{
-moz-column-count:3;      <span class="code_comment">/* Firefox */</span> 
-webkit-column-count:3; <span class="code_comment">/* Safari和Chrome */ </span>
<code>column-count:3;</code>
}
	

CSS3 規定列之間的間隔

column-gap 屬性規定列之間的間隔：

實例

規定列之間40 像素的間隔：

div
{
-moz-column-gap:40px;         <span class="code_comment">/* Firefox */</span> 
-webkit-column-gap:40px;     <span class="code_comment">/* Safari和Chrome */ </span>
<code>column-gap:40px;</code>
}
	

CSS3 列規則

column-rule 屬性設置列之間的寬度、樣式和顏色規則。

實例

規定列之間的寬度、樣式和顏色規則：

div
{
-moz-column-rule:3px outset #ff0000;     <span class="code_comment">/* Firefox */</span> 
-webkit-column-rule:3px outset #ff0000;     <span class="code_comment">/* Safari and Chrome */</span>
column-rule:3px outset #ff0000;
}