css宽度不同的瀑布流

CSS宽度不同的瀑布流是一种非常流行的网页设计风格，它常常被用于图片墙和产品展示等场合。

    .item {
        width: calc(33.33% - 10px); /* 三列布局，每列之间间隔10像素 */
        float: left;
    }
    .item:nth-child(3n+2) {
        margin: 0 5px; /* 第二列和第三列之间间隔5像素 */
    }
    .item:nth-child(3n+3) {
        margin-right: 0; /* 第三列没有右侧间隔 */
    }

这段CSS样式代码实现了一个三列布局的瀑布流效果，其中每个元素的宽度是父容器宽度的33.33%减去10像素的间隔。使用了浮动属性使每个元素靠左排列。

注意到另外两个CSS选择器：.item:nth-child(3n+2)和.item:nth-child(3n+3)。它们用来实现每列之间的间隔和第三列没有右侧间隔的效果。其中nth-child是CSS3中的伪类选择器，通过给定的公式可以选中特定位置的元素。

综合运用这些CSS技巧，可以轻松设计出美观实用的瀑布流布局，为网页增添动态魅力。