css3 多列布局

css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，讓文字按多列呈現，就像報紙上的新聞排版一樣

column-count: 屬性設定列的具體個數

column-width: 屬性控制列的寬度

column-gap: 兩列之間的縫隙間隔

column-rule: 規定列之間的寬度、樣式和顏色

column-span: 規定元素應橫跨多少列(n:指定跨n列 all:跨所有列)

2、多列的用法

*        width:

1054px;
padding:
20px;
margin:
0 auto;
font-family:
"微軟雅黑"
,arial;
/*設定以幾列的方式顯示*/
column-count:2;
/*指定列寬*/
column-width:
500px;
/*指定列與列之間的間距*/
column-gap:
50px;
/*指定列與列之間間隙的樣式*/
/*column-rule:2px dotted red*/
/*相對應下面的三個屬性*/
column-rule-color:red;
column-rule-style:dotted;
column-rule-width:
2px;
}        column-span: all;
}<
/style>

如果設定列的最大高度，這個時候，文字內容會從第一列開始填充，然後第二列，第三列

max-height:

300px;

CSS3多列布局

最近買了基本書，因為在實習的時候用到很多css動畫，給任務的時候，也會讓布局一些設計頁面。在做的過程中，覺著自己的css功底還是不行，所以就想再多積累多學習。今天主要看的是大漠的 css3 看知乎上和很多人的技術部落格裡都推薦過。今天先說css3的多列布局。平時用到的比較多的是兩欄布局，三欄布局。方...

CSS3多列布局

css3多列布局可以自動將內容按指定的列數排列，它實現了和報紙 雜誌排版非常相似的布局效果。一 css3多列布局核心屬性 1 columns 整合column width和column count兩個屬性。2 column width 定義每列列寬度 3 column count 定義分列列數 4 ...

CSS3多列布局

在本章中，您將學習如下多列屬性 屬性 瀏覽器支援 column count column gap column rule internet explorer 10 和 opera 支援多列屬性。firefox 需要字首 moz chrome 和 safari 需要字首 webkit 注釋 inter...