实现多图的九宫格分布
时间: 2023-09-14 13:03:07 浏览: 35
实现多图的九宫格分布可以使用CSS的flex布局,具体步骤如下:
1. 创建一个容器,设置为flex布局,设置flex-wrap为wrap,让子元素自动换行显示。
2. 设置子元素的宽度为容器宽度的1/3,并设置子元素的高度为宽度。
3. 对于第一行的子元素,设置margin-bottom为容器宽度的1/3,使其下方预留出空间。
4. 对于第一列的子元素,设置margin-right为容器宽度的1/3,使其右侧预留出空间。
5. 对于最后一行的子元素,设置margin-top为容器宽度的1/3,使其上方预留出空间。
6. 对于最后一列的子元素,设置margin-left为容器宽度的1/3,使其左侧预留出空间。
7. 对于单独的一张图片,可以设置其宽度为容器宽度的2/3,并设置其margin为auto,使其水平居中显示。
示例代码如下:
```
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.33%;
height: 0;
padding-bottom: 33.33%;
}
.item:first-child {
margin-bottom: 33.33%;
}
.item:nth-child(3n+1) {
margin-right: 33.33%;
}
.item:last-child {
margin-top: 33.33%;
}
.item:nth-child(3n) {
margin-left: 33.33%;
}
.single-img {
width: 66.67%;
height: 0;
padding-bottom: 66.67%;
margin: auto;
}
```