CSS实现瀑布流

多列布局介绍

多列布局 指的是 CSS3 可以将文本内容设计成像报纸一样的多列布局,例:

CSS3 的多列布局属性:

  • column-count:指定了需要分割的列数;
  • column-gap:指定了列与列间的间隙;
  • column-rule-style:指定了列与列间的边框样式;
  • column-rule-width:指定了两列的边框厚度;
  • column-rule-color:指定了两列的边框颜色;
  • column-rule:是 column-rule-* 所有属性的简写;
  • column-span:指定元素跨越多少列;
  • column-width:指定了列的宽度。

CSS实现瀑布流代码如下:

.css-column {
  column-count: 4; //分为4列
}

.css-column div {
  break-inside: avoid; // 保证每个子元素渲染完在换行
}

原创作者:吴小糖

创作时间:2023.12.4

你可能感兴趣的:(css,前端)