多列布局—CSS学习笔记

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

---

前言

有些时候，可能在一个盒子内要展示一大段文字。这个时候为了美观工整，可以采用类似报纸或者杂志那样的多列布局去实现。

多列布局

首先我们先准备大段文字，然后用一个容器嵌套。然后我们可以看到默认的效果

但有时候我们也可以尝试用多列布局展示，比如这里我们采用两列布局。

column-count:2;

就形成了类似报纸的文章结构。

设置列宽

当然，上例我们也可以设置列宽来排列文章。

column-width: 240px;

修改多列的样式

以上面的代码为例，可以采用column-gap来设置列间间隙。例如

column-gap:30px;

将会修改列的间隙为30像素值，同时每列之间的宽度减小（因为间距加大，容器固宽）

还可以采用column-rule在列间加入分割线。column-rule与border属性类似，是 column-rule-color和 column-rule-style的缩写。例如

column-rule:2px dotted brown;

值得一提的是这条分割线本身并不占用宽度。它置于用 column-gap 创建的间隙内。如果需要更多空间，你需要增加 column-gap 的值。

内容折断的问题

但此方法也有问题，可以看到在跨列的时候可能会把段落的内容给折断，降低阅读的体验。现在我们用几个文字盒子来演示一下。

以下是外嵌盒子和内部小盒子的css

.container {
    column-width: 300px;
    column-gap: 20px;
}
.box {
    border: 1px solid darkblue;
    width: 320px;
    height: 320px;
    padding: 10px;
    margin: 0 0 1em 0;
}

可以看到标题和内容被折断了，让人看着有些别扭。

这时可以在内部小盒子上加上break-inside:avoid就会避免内容的折断。

.box {
    break-inside:avoid；
    page-break-inside: avoid
    border: 1px solid darkblue;
    width: 320px;
    height: 320px;
    padding: 10px;
    margin: 0 0 1em 0;
}

现阶段，增加旧属性 page-break-inside: avoid 能够获得更好的浏览器支持。