老师，我这样写可以吗？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2-14 编程练习</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			font-family: 微软雅黑;
			font-size: 0;
		}
		.container{
			width:1000px;
			height: 400px;
			margin: 0 auto;
			
		}
		.blue{
			background: #AFFAFF;
			height:70%;
			width: 100%;
			float: left;
		}
		.pink{
			background: pink;
			width: 100%;
			height: 30%;
			float: left;
		}
		
		.picL{
			width: 81.4%;			
			margin: 32.5px auto;
		}
		.pic1{
			float: left;
			margin-right: 93px;
		}
		.pic2{
			float: right;
		}
		.picS{
			width: 81.4%;
			margin: 30PX AUTO;
		}
		.pic3{
			float: left;
			margin-right: 107px;
		}
		.pic4{
			float: left;
			margin-right: 107px;
		}
		
	</style>
</head>

<body>
	<div class="container">
		<div class="blue">
			<div class="picL">
				<img class="pic1" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="pic1"/>			
				<img class="pic2" src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="pic2"/>
			</div>
		</div>
		<div class="pink">
			<div class="picS">
				<img class="pic3" src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="pic3"/>
				<img class="pic4" src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="pic4"/>
				<img class="pic5" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="pic5"/>
			</div>			
		</div>
	</div>
</body>
</html>

Zhaofangyu 2019-05-13

源自：CSS网页布局基础 2-14 编程练习

收起

1回答

好帮手慕码 2019-05-13 16:29:16

同学你好！

图片之间的每个间隙应该是不同的

可以计算一下边距，这样简单一些：

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

提问者 Zhaofangyu #1

好的，谢谢老师，主要是我看案例里的图片间距也是不一样的

2019-05-13 19:19:51
好帮手慕码回复提问者 Zhaofangyu #2

同学你好！计算边距是比同学那样布局简单一点，而且有规律哦，继续加油！祝学习愉快，欢迎采纳 ~~~~~

2019-05-13 19:22:08