bottom下面的div使用float之后div的margin值为什么相加而不是取大值了

bottom下面的div使用float之后div的margin值为什么相加而不是取大值了

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    img{width:100%;height:100%;}

    .top{width:800px;height:500px;position:relative;background:blue;}

    .top_left{width:200px;height:400px;float:left;position:absolute;left:10%;top:0px;bottom:0px;margin:auto 0;border:1px solid #000;}

    .top_right{float:right;position:absolute;width:200px;height:400px;right:10%;top:0px;bottom:0px;margin:auto 0;}

    .bottom div{width:100px;height:100px;float:left;margin:100px;}

    .bottom{background:pink;overflow:hidden;width:800px;}

    

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div>

      <div class="top">

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

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

      </div>

      <div class="bottom">

          <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>


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

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

1回答
好帮手慕星星 2018-07-13 13:39:39

经测试显示如下:

http://img1.sycdn.imooc.com//climg/5b483aa900015dda04140561.jpg

要求的是图片与边距之间距离和图片与图片之间的距离是相等的哦,也就是图中的粉色框部分。首先可以先准确的计算一下像素,最后再通过margin值显示在正确的位置。自己试着写一写,祝学习愉快~~


  • 提问者 qq_陈大吹_0 #1
    我想问的是 下面三块小图 我给他们设了浮动够,再给他们设margin为什么变成了两个相邻之间的图,外边距叠加,而不是取大值了
    2018-07-14 09:45:35
  • 好帮手慕星星 回复 提问者 qq_陈大吹_0 #2
    浮动之后的元素,外边距是不叠加的哦,自己可以测试一下。
    2018-07-15 08:03:38
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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