要使用 CSS 制作瀑布流布局,可以采用多列布局(multicolumn layout)的方式。通过设置 column-count 属性和 column-width 属性,将内容块分布在多个列中,并使这些列等宽,并在它们之间创建空白间隔。例如:
.container {
column-count: 3; /* 分成三列 */
column-width: 300px; /* 每列宽度为300像素 */
}
.item {
display: inline-block;
margin-bottom: 20px; /* 下方留白20像素 */
width: 100%; /* 填满宽度 */
}
这段CSS代码将把容器元素分成三列,每列宽度为300像素,每个项元素占据整个列宽,并且下方留白20像素。
此外,还可利用 flexbox 布局或 grid 布局实现瀑布流布局,它们都具有更高的灵活性和定制性。但是在此不做过多讲解。
需要注意的关键词包括 multicolumn layout
, column-count
, column-width
, flexbox layout
, grid layout
等。