老师,图片与图片之间的间距,怎么等于左右边距

老师,图片与图片之间的间距,怎么等于左右边距

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 1000px;
        height: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -500px;
        margin-top: -250px;
       

    }
    .topCon{
        width: 1000px;
        height: 300px;
        background-color: #00FFFF;
         text-align: center;
        line-height: 300px;
        
        
        

    }
    .bottomCon{
        width: 1000px;
        height: 200px;
        background-color: pink;
         text-align: center;
        line-height: 200px;

    }
    img{
        vertical-align: middle;
    }
 
   


 
  </style>
</head>
<body>
  <!-- 主界面 -->
  <div class="main">
      <!-- 上部内容 -->
      <div class="topCon">        
          <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
          <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
      </div>
      <!-- 下部内容 -->
      <div class="bottomCon">
          <img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
          <img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
          <img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
      </div>
  </div>
</body>
</html>

正在回答

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

1回答

同学,你好。以上半部分为例,图片之间的间距加上左右边距应该等于图片外面盒子的宽度减去两张图片的宽度,再除以3就是图片之间的间距和左右的边距的值,给两张图片分别设置margin-left值为这个值就可以了。在这里,间距为(1000-360*2)/3为93.3,如图:

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

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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