CSS的多列


column-rule is a shorthand for column-rule-color, column-rule-style, and column-rule-width, and accepts the same values as border.

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}
To make more space either side of the rule you will need to increase the column-gap size.

either side： 两边



column-span: all; / none; 要么全部被分割，要么不分割。
整个元素作为分割元素居中显示。

break-inside: avoid,  避免一段inline的文本被分割（换列或者打印换页）

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
  padding: 10px;
  margin: 0 0 1em 0;


Reload the page and your boxes should stay in one piece.


阅读量: 604
发布于:
修改于: