CSS3 Pushing the Limits - Creating a Multicolumn Layout

Posted on   |   In

多列布局

<article class=”container”>
<p>Lorem ipsum...</p>
<p>Donec tincidunt...</p>
<p>Etiam eu elit...</p>
<!-- Further paragraphs -->
</article>
.container {
width: 600px;
column-width: 180px;
}

column-width 每列的宽度，但不一定这么多，在尽可能充满容器的情况下有出入
默认的列间空隙是 1em

另一种写法：

.container {
width: 600px;
column-count: 4;
}

column-count 定出列数，其他让系统搞定

列间的空隙是 column-gap: 30px;

间隔显示的style

就是间隔线

column-rule-width: 2px;
column-rule-style: dotted;
column-rule-color: #ccc;

column-span: all; 跨列， none 或者 all

column-fill 内容填充 默认balance 也可以是auto， balance 内容分布比较均匀

这几个属性是设置谁什么时候新起一个column的
用的时候查资料就好

  • break-after
  • break-inside
  • break-before