css瀑布流布局横向 |css3 白色阴影

/* css代码 */
.container {
column-count: 3;  // 将容器分为3列
column-gap: 20px; // 列间距
}
.item {
break-inside: avoid-column; // 禁止物品被划分到两列
margin-bottom: 20px;       // 物品之间的间距
display: inline-block;     // 将物品变为行内块元素
width: 100%;               // 宽度占满容器
}
img {
width: 100%;  // 图片宽度充满物品
height: auto; // 高度自适应
}

上面的代码为一个基本的横向瀑布流布局。通过将容器分为三列以及设置列间距，大家可以让物品以横向瀑布流的形式呈现。而每个物品则需要加上一个属性break-inside: avoid-column;，这一属性可以让物品永远只在同一列内，防止物品被划分到两列中而影响美观程度。

此外，由于物品是以行内块元素展示的，需要设置宽度为100%来占满容器的宽度，而高度则可以自适应图片内容。通过以上定义一个简单的横向瀑布流。大家也可以添加其他的样式属性，实现更加多彩丰富的展示效果。