如果不加row,图片数量不固定放一起,实现第一行2列,第二行3列,第三行2列,第四行3列的图片布局
时间: 2024-03-20 19:39:06 浏览: 16
如果不加row,图片数量不固定放一起,并且需要实现第一行2列,第二行3列,第三行2列,第四行3列的图片布局,可以使用CSS3的多列布局(CSS3 Multi-column Layout)和nth-child伪类来实现。具体实现方式如下:
HTML结构:
```
<div class="container">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
<img src="image6.jpg" alt="image6">
<img src="image7.jpg" alt="image7">
<img src="image8.jpg" alt="image8">
<img src="image9.jpg" alt="image9">
<img src="image10.jpg" alt="image10">
<img src="image11.jpg" alt="image11">
<img src="image12.jpg" alt="image12">
</div>
```
CSS样式:
```
.container {
column-count: 3; /* 列数为3 */
column-gap: 20px; /* 列与列之间的间隔为20px */
}
.container img {
width: 100%; /* 图片宽度为100% */
margin-bottom: 20px; /* 图片与图片之间的间隔为20px */
}
/* 第一行第一个图片的样式 */
.container img:nth-child(1),
.container img:nth-child(2) {
width: calc(66.66% - 10px); /* 第一列宽度占据2/3 */
}
/* 第二行第一个图片的样式 */
.container img:nth-child(3),
.container img:nth-child(4),
.container img:nth-child(5) {
width: calc(33.33% - 10px); /* 第一列宽度占据1/3 */
}
/* 第三行第一个图片的样式 */
.container img:nth-child(6),
.container img:nth-child(7) {
width: calc(66.66% - 10px); /* 第一列宽度占据2/3 */
}
/* 第四行第一个图片的样式 */
.container img:nth-child(8),
.container img:nth-child(9),
.container img:nth-child(10) {
width: calc(33.33% - 10px); /* 第一列宽度占据1/3 */
}
```
这样就可以实现不加row,图片数量不固定放一起,并且需要实现第一行2列,第二行3列,第三行2列,第四行3列的图片布局。具体思路是,使用CSS3的多列布局将图片容器设置为三列,通过column-gap属性设置列与列之间的间隔。然后,使用nth-child伪类来选择每一行的第一个图片,设置宽度占据2/3,其余图片设置宽度占据1/3,通过设置图片与图片之间的间隔实现图片的布局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)