前端笔记

最新推荐文章于 2023-07-27 21:17:40 发布

Qyt-Coding

最新推荐文章于 2023-07-27 21:17:40 发布

阅读量114

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_41519442/article/details/108429899

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
将图片均等分
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
    <script type="text/javascript">
   		
    </script>
</head>
<body>
	<div class="test">
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
		<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		
		
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
			<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		<div class="test1">
		<img style="width:100%;height: 100% ;" src="img/0.jpg" />
		</div>
		
	</div>
	
</body>

<style>
	.test{
		display:flex;
		flex-wrap: wrap;
		/*width 表示最外层的宽度*/
		width: 500px;
		/*//flex-wrap: wrap;*/
	}
	
	.test1{
		border:1px solid red;
		/*小的div的宽度  
		 	如果想一行有4个div，那么就改成width :23%即可
		 * */
		width: 47%;
	}
	
</style>
</html>

Qyt-Coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记

效果：将图片均等分代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>hello world</title> <script ty
复制链接

扫一扫

专栏目录