麻烦老师帮我看看，哪里需要修改，谢谢了！

来源：2-14 编程练习

lianhilda

2019-10-14 23:51:15

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    *{
      padding: 0;
      margin:0;
    }
    .one{
      max-width: 100%;
      height: 400px;
      line-height: 400px;
      background: #ade8e6;

}
    .one_left{
      width: 50%;
      height: 400px;
      background: url("http://climg.mukewang.com/58c0f808000129a303600215.jpg") center no-repeat;
      float: left;
    }
    .one_right{
      width: 50%;
      height: 400px;
      background: url("http://climg.mukewang.com/58c0f819000198a703600214.jpg") center no-repeat;
      float:right;
    }
    .two{
      max-width: 100%;
      height: 200px;
      background: #f48d89;
    }
    .two_left{
      width: 33%;
      height: 200px;
      background: url("http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg") center no-repeat;
      float: left;
    }
    .two_center{
      width: 33%;
      height: 200px;
      background: url("http://climg.mukewang.com/58c0f8220001dfce02000060.jpg") center no-repeat;
      float: left;
    }
    .two_right{
      width: 33%;
      height: 200px;
      background: url("http://climg.mukewang.com/58c0f8780001c74602000060.jpg") center no-repeat;
      float: left;
    }
</style>
</head>
<body>

<div class="one">
      <div class="one_left"></div>
      <div class="one_right"></div>
</div>
<div class="two">
      <div class="two_left"></div>
      <div class="two_center"></div>
      <div class="two_right"></div>
</div>
</body>
</html>

写回答

1回答

好帮手慕慕子

2019-10-15

已采纳

同学你好，练习要求如下，整个盒子需要在页面中居中显示，每一行的图片之间的间距以及图片与盒子之间的间距是需要相等的，

直接给元素设置百分比宽度，设置背景图片居中显示，导致图片距离大盒子，和图片与图片之间的间距是不一样的，示例：老师这边打开的效果如下所示，间距不等，另整体没有居中显示

建议修改：

可以给外层盒子一个固定的宽度，通过定位实现整体居中显示
这里以一层图片为例：通过检查元素可以发现，图片的宽度为360px，那么就设置盒子的宽度为360px, 让图片刚好铺满盒子，然后通过计算剩余总空间1200 - 360 * 2 = 480，一共有三处间距，每处间距占据位置为 480 / 3 = 160，然后分别给图片设置marign值，实现效果
第二行的图片也是同样的计算思路，同学可以参考第一行实现的思路自己下去做出调整哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

0 学习 · 40143 问题

查看课程

相似问题

老师麻烦帮我看看代码还有没有需要修改的地方

回答 4

老师你好，麻烦看一下我的问题在哪里

回答 1

麻烦老师批改，谢谢。

回答 2

老师，帮我看一下哪里有需要修改的地方，谢谢！

回答 1

老师你好，麻烦看下作业，还有哪里需要改善。

回答 1

打开慕课网App查看更多内容