我上面两张图中间的间距和两边的不一样啊？也是按照（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>

ude 2019-04-17

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

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2019-04-17 16:25:40

同学你好，1、这是是由于图片之间有一点间距引起的哦，可以给图片设置浮动（浮动会使其变为块级元素，可以去除这个间距），不过浮动之后，高度会塌陷，可以给父级添加下overflow: hidden，例：

2、下部分的图片的左外边距不应该是93.3px的哦，这里可以参考上部分的在计算下哦，且下部分的也需要给父级添加下overflow: hidden属性，解决子元素带来的高度塌陷的问题。

祝学习愉快！

收起回答

ude 提问者 #1

老师我计算的就是上部分的啊

2019-04-17 16:26:48
好帮手慕糖回复提问者 ude #2

你好，因为图片这里是设置的container下的所以的图片哦，是包括下部分的哦。所以老师以为是统一计算的哦，这里把下部分，在计算下就好了哦。祝学习愉快！

2019-04-17 16:38:11