举一个瀑布流布局的例子
时间: 2023-09-27 11:06:00 浏览: 47
瀑布流布局常用于展示图片、商品等的网页设计中,以下是一个简单的瀑布流布局的例子:
HTML代码:
```
<div class="wrapper">
<div class="item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="item">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="item">
<img src="image4.jpg" alt="Image 4">
</div>
<div class="item">
<img src="image5.jpg" alt="Image 5">
</div>
<div class="item">
<img src="image6.jpg" alt="Image 6">
</div>
</div>
```
CSS代码:
```
.wrapper {
column-count: 3;
column-gap: 20px;
}
.item {
display: inline-block;
margin-bottom: 20px;
width: 100%;
}
.item img {
width: 100%;
}
```
在上面的代码中,首先定义了一个包含多个 `item` 的容器 `wrapper`,然后使用 `column-count` 属性将容器分成三列,并使用 `column-gap` 属性设置列与列之间的间距。每个 `item` 元素使用 `display: inline-block` 实现水平排列,并设置 `margin-bottom` 属性为 20px,使得每个元素下方有一定的间距。最后,每个 `item` 元素中包含一张图片,使用 `width: 100%` 让图片宽度铺满整个元素。这样,就能够实现一个简单的瀑布流布局。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)