2. columns 设置列宽和列数
column-count: number|auto
number:列的个数 auto:根据column-with自动适配
html
<div class="newspaper">
“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些.
</div>
css
.newspaper
{
/* 分成3列 */
column-count:3;
}
column-fill: balance|auto;
balance:列长短平衡 auto:列顺序填充,他们长度可能不同
html
<div class="demo">
ABCDDD...省略一大段文字
</div>
css
.demo{
column-fill:balance;
}
column-gap: length|normal
length:指定的长度 normal:1em
html
<div class="demo">
ABCDDD...省略一大段文字
</div>
css
.demo{
/* 分成4列 */
column-count:4;
/* 列之间的间隔2em */
column-gap:2em;
}
column-rule: column-rule-width column-rule-style column-rule-color
-width:间隔宽度 -color:间隔的颜色
html
<div class="demo">
ABCDDD...省略一大段文字
</div>
css
.demo{
/* 分成4列 */
column-count:4;
/* 列之间的间隔1em */
column-gap:1em;
/* 间隔线4px宽,点状.红色 */
column-rule:4px dotted red;
}
值:thin|medium|thick|length;
thin:细线 medium:中等 thick:粗 length:指定宽度
column-span:1|all
- 1:跨越1列
- all:跨越所有列
html
<div class="demo">
<h1>标题标题标题标题标题标题标题标题...</h1>
ABCDDD...省略一大段文字
</div>
css
.demo h1{
/* 跨越所有列 */
column-span:all;
}
.demo{
/* 分成4列 */
column-count:4;
/* 列之间的间隔1em */
column-gap:1em;
/* 间隔线4px宽,点状.红色 */
column-rule:4px dotted red;
}
html
<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>
css
.demo{
/* 每一列宽度100px */
column-width:100px;
}
columns: column-width column-count;
html
<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>
css
/* 设置列宽度100px,列数量3 */
.demo{
columns:100px 3;
}
/* 等价于 */
.demo{
column-width:100px;
column-count:3;
}
Last modified 3yr ago