前端图片列表两边均匀分布，从左向右排列

最新推荐文章于 2024-05-06 16:48:14 发布

春风姐姐

最新推荐文章于 2024-05-06 16:48:14 发布

阅读量1.8k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/sumimg/article/details/108661480

版权

前端图片列表两边均匀分布，从左向右排列

先看一下效果图

在这里插入图片描述
主要代码是：

.list:after {
	content: '';
		/*这个宽度和子元素宽度一致*/
		width: 30%; /* 200px */
		height: 0;
		display: block;
	}
	.box {
		width: 30%; /* 200px */
		margin-bottom: 5px;
	}

下面是全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
			}
			.list:after {
				content: '';
				/*这个宽度和子元素宽度一致*/
				width: 30%; /* 200px */
				height: 0;
				display: block;
			}
			.box {
				width: 30%; /* 200px */
				margin-bottom: 5px;
			}

			.box .img {
				width: 100%;
				height: 150px;
				background-color: pink;
			}
		</style>

	</head>
	<body>
		<div class="list">
			<div class="box">
				<div class="img">221</div>
			</div>
			<div class="box">
				<div class="img">222</div>
			</div>
			<div class="box">
				<div class="img">223</div>
			</div>
			<div class="box">
				<div class="img">224</div>
			</div>
			<div class="box">
				<div class="img">225</div>
			</div>

		</div>
	</body>
</html>

春风姐姐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端图片列表两边均匀分布，从左向右排列

前端图片列表两边均匀分布，从左向右排列先看一下效果图主要代码是：.list:after { content: ''; /*这个宽度和子元素宽度一致*/ width: 30%; /* 200px */ height: 0; display: block; } .box { width: 30%; /* 200px */ margin-bottom: 5px; }下面是全部代码<!DOCTYPE html><html> <head&
复制链接

扫一扫