css3写瀑布流

CSS3的流行使得瀑布流布局成为最受欢迎的网页设计趋势之一。瀑布流布局通过把内容放置在不规则的列中来呈现网页，效果非常视觉化。以下是如何使用CSS3来创建瀑布流布局的简单步骤。

ul {
    padding: 0;
    margin: 0;
    list-style: none;
    column-count: 3;
    column-gap: 10px;
}
li {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
    

首先要创建一个无序列表（ul）来包含每个元素。在ul上使用“column-count”属性可以定义多少列将用于布局，而“column-gap”定义了每个元素之间的间距。接下来，需要对每个元素（li）应用样式。

在这里，每个li显示为“inline-block”，以便在在瀑布流布局中填满每个列。同时，在每个Li上添加了一个“margin-bottom”来增加元素间的间距。为了使图像在其自身之间垂直居中，将其显式定义为块级元素，分别给宽和高应用100%和“自动”。

当然，上述CSS只是一个演示，具体样式我们可以根据实际需求进行设计调整，比如在图片周围添加自己所需的边框，自定义间距等等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！