新的多列布局CSS3（多列布局）很简单，但并不简单

terry 2年前 (2023-09-27) 阅读数 96 #数据结构与算法

1。结构清晰

多列排列的结构非常简单，主要由多列容器和列盒组成。

如果元素设置了column-width和column-count属性并且值不是auto，则该元素是多列容器。

多列容器通过多列显示内容。

2。了解

1的基本用法。 column-count和column-width

通过这两个属性，我们可以控制列的数量，但是相比count属性，width属性就非常灵活了。

设置了width属性后，并不意味着列的宽度就是这个固定值。它还会根据列布局容器的宽度灵活缩放。

2、column-rule和column-gap

这两个属性主要帮助我们设置柱间隙和柱样式。这很容易理解：

你可以在这里放一栏-如果规则的宽度设置得更大，你会感到惊讶。

3。 column-span

该属性与表格中的span属性类似，但只有none和all两个值，并且其前后的内容必须按照列布局规则重新排列。

3。关于应用程序的简短讨论

掌握了基本结构和用法后，您现在可以漂亮地格式化文章：

看起来确实不错，但感觉有点奇怪。

哪里出了问题？因为您几乎永远不会在显示文章的网站上看到这种类型的格式。（查看大多数杂志或新闻网站）。

其实看到这个多栏布局，我第一个想到的就是旧书的排版。那么我们就可以利用这个分栏布局来实现旧书的排版了：

  .demo {
    width: 300px;
    margin: 100px auto;
    columns: 10;
    column-rule: 1px dashed rgb(213,213,213);
    direction: rtl;
    word-wrap: break-word;
    text-align: center;
  }
复制代码

使用多栏布局来实现这个效果使用这个效果的时候要记住：

每一栏的宽度必须设置为1左右word ，所以对容器的宽度有严格的要求；
使用word-wrap：break-word属性对中文标点符号进行换行；

那么不用多列布局也能达到上面的速率吗？当然！而我们需要熟悉CSS3的一个新成员——写入模式：

  .demo {
    width: 180px;
    margin: 50px auto;
    height: 170px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    writing-mode:vertical-rl;
    background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
    background-size: 30px 100%;
  }
复制代码

这里唯一值得诟病的是，列样式不能像列布局中的列规则那样灵活改变。

CSS总是给人一种很神奇的感觉。接下来，我们将使用多列布局来实现九方网格布局：

它最大的缺点从图中的数字就可以清楚地看出。事实上，在实现这样的布局时，执行此程序时，必须特别注意子元素垂直边框的效果。这个就留给读者自己去思考了。