多列布局--瀑布流原理
阿新 • • 發佈：2018-08-07
-s mil 間距 顯示 一行 eight add 布局 web
/*設置以幾列的方式顯示*/
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;
}
.wrapper > h4{
column-span: all;
}
</style>
多列布局
CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀布局模式的有力擴充。這種新語法能夠讓WEB開發人員輕松的讓文本呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的註意力就會減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設計中需要限制文本的寬度，讓文本按多列呈現，就像報紙上的新聞排版一樣
- 常用屬性：
a) column-count: 屬性設置列的具體個數
b) column-width: 屬性控制列的寬度
c) column-gap: 兩列之間的縫隙間隔
d) column-rule: 規定列之間的寬度、樣式和顏色
e) column-span: 規定元素應橫跨多少列(n:指定跨n列 all:跨所有列)
- 多列的用法：
<style>
*{
padding: 0;
margin: 0;
}
.wrapper{
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;
}
.wrapper > h4{
column-span: all;
}
</style>
- 列高度的平衡：
如果設定列的最大高度，這個時候，文本內容會從第一列開始填充，然後第二列，第三列
max-height: 300px;
多列布局--瀑布流原理