照片墙样式——web移动端三列多行

最新推荐文章于 2024-07-27 23:01:21 发布

sangyanli

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量494

点赞数

分类专栏： css样式

本文链接：https://blog.csdn.net/sangyanli/article/details/103777323

版权

css样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div class="imgList">
    <div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
	    <img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
	<div>
		<img class="coverImg" src="../../img/baseimg.jpg" />
	</div>
</div>

.imgList{
	display: flex;
	flex-wrap: wrap;
}
.imgList div {
	width: 32%;
	height: 110px;
	margin-bottom: 8px;
}

.imgList div:nth-child(3n+2) {
	margin:0 2%;
}
.coverImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

效果