为什么我底下的图片没有设置它也移动了?

为什么我底下的图片没有设置它也移动了?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <style type="text/css">

    *{padding:0;

      margin:0;

      }

      .banner{width:1000px;

              height:800px;

              margin:0 auto;

              background:red;

              }

      .top{width:1000px;

           height:500px;

           background:#0ff;

           padding:0}

      .top1{float:left;margin:140px 0 140px 93px;}

      .top2{float:left;margin:140px 93px 140px 93px;}

      .bottom{width:1000px;

           height:300px;

           background:#f9f;

           }


  </style>

  <title>Document</title>

</head>

<body>

  <div class="banner">

    <div class="top">

      <div class="top1"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">

      </div>

      <div class="top2"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">

      </div>

    </div>

    <div class="bottom">

      <div class="bottom1"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">

      </div>

      <div class="bottom2"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">

      </div>

      <div class="bottom3"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">

      </div>

    </div>

  </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕星星 2018-04-22 10:21:37

我自己测试的时候和一只大懒喵同学测试的效果是一样的哦,可能你上面的代码没有粘贴全部,自己测试出现的这种情况是因为上半部分左边这张图的高度比右边图片高度多了1px,所以浮动的第一张会在后面,前面被上半部分第一张图片挡住了,自己可以调整一下,祝学习愉快~~

提问者 慕前端1255534 2018-04-21 20:33:40

http://img1.sycdn.imooc.com//climg/5adb2f94000183bd05410413.jpg我的效果图是这样的。

  • 新建一个文件,把代码复制过去
    2018-04-22 00:23:31
一只大懒喵 2018-04-21 20:21:51

我复制了你的代码是正常显示的http://img1.sycdn.imooc.com//climg/5adb2cd5000174df16910862.jpg

一只大懒喵 2018-04-21 20:14:00

能说的详细点吗

  • 提问者 慕前端1255534 #1
    就是下面三张图片应该都是靠左边的,可是设置完上面的两张图片后,它就自动居中了,我感觉我上面的margin距离设置的没有错啊!
    2018-04-21 20:18:01
  • 提问者 慕前端1255534 #2
    还有 我刚才用F12看了一下,body是宽高是980X800 .banner的宽高是1000X800 是怎么回事? 麻烦你了
    2018-04-21 20:20:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师