我上面两张图中间的间距和两边的不一样啊？ 也是按照（1000-360）/2 计算的呀
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
.container {
margin: 0 auto;
width: 1000px;
/* border: 1px solid #000; */
/* text-align: center; */
}
.top {
width: 1000px;
background: #AED8E5;
}
.container img {
vertical-align: top;
margin-left: 93.3px;
/* display: block; */
}
.bottom {
background: #FEB7C2;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="top">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" alt="">
</div>
<div class="bottom">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" alt="">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" alt="">
</div>
</div>
</body>
</html>0
收起
正在回答
1回答
同学你好，1、这是是由于图片之间有一点间距引起的哦，可以给图片设置浮动（浮动会使其变为块级元素，可以去除这个间距），不过浮动之后，高度会塌陷，可以给父级添加下overflow: hidden，例：
2、下部分的图片的左外边距不应该是93.3px的哦，这里可以参考上部分的在计算下哦，且下部分的也需要给父级添加下overflow: hidden属性，解决子元素带来的高度塌陷的问题。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星