3-2这个代码怎么设置左右边距间距一致?

3-2这个代码怎么设置左右边距间距一致?

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
       <!-- 此处编写样式 -->
      <style type="text/css">
          *{
              padding:0;
              margin:0;
          }
          .big{
              border: 1px dashed;
              padding: 10px;
              width: 734px;
          }
          .one{
              border:1px #fff solid;
              padding:1px;
              float:left;
          }
          .two{
              border:1px #fff solid;
              padding:1px;
              float:left;
          }
          .three{
              border:1px #fff solid;
              padding:1px;
             
          }
          .four{
              border:1px #fff solid;
              padding:1px;
              float: left;
          }
          .five{
              border:1px #fff solid;
              padding:1px;
              float: left;
          }
          .six{
              border:1px #fff solid;
              padding:1px;
          }
      </style>
</head>
<body>  
       <!-- 此处写代码 -->    
       <div class="big">
           <div class="one">
               <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
           <div class="two">
               <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
           <div class="three">
               <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
           <div class="four">
               <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
           <div class="five">
               <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
           <div class="six">
               <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课学习新知识!</p>
           </div>
       </div>
</body>
</html>


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

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

2回答
小丸子爱吃菜 2017-07-31 16:52:12

盒子的宽度可不仅仅是元素的width,还有margin、padidng和border

小丸子爱吃菜 2017-07-20 09:34:49

使用大盒子.big的宽度减去3张图片的宽度,再除以4,得出的值就是图片之间,以及图片与大盒子之间的距离。

祝学习愉快!

  • 那为什这样算 我父元素是 760px 小盒子宽度是240培训 那 小盒子之间的距离就是10? 那为什我设置10 就换行了。。。
    2017-07-31 16:36:23
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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