为什么是这种效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.container{
width:1080px;
height:360px;
margin:0 auto;
}
.div1 div{
float:left;
margin:12px auto 12px 120px;
}
.div1{
height:240px;
background:#ADD8E6;
}
.div2{
height:120px;
background:#FFB6C1;
}
.div2 div{
float:left;
margin:30px auto 30px 120px;
}
/*此处写代码*/
</style>
</head>
<body>
<div class="container">
<div class="div1">
<div><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/></div>
</div>
<div class="div2">
<div><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/></div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
正在回答
同学，你好。这是因为图片有默认间隙的原因，因此图片外面包裹的盒子实际的高度是219px，加上上下内边距24px，就是243px，如图：
清除默认间隙可以给img设置display：block样式，如图：
增大容器的高和清除浏览器的默认样式都是可以解决同学的问题，实现效果的。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星