大盒子宽度有812 里面一个小盒子才242 为什么不能三个盒子并排

大盒子宽度有812 里面一个小盒子才242 为什么不能三个盒子并排

<html>

<head>

    

    <style>

        *{padding:0;margin:0;}

        .hourse{

        font-size:15px;

        overflow:hidden;

        width: 770px;

        border:1px dashed #ccc;

        padding:10px;

        zoom:1

        }

        .hourse div

        {

        width:240px;

        border:1px solid #ccc;

        margin:10px;

        float:left;

        }

        img{display:block;}

        p{line-height:30px;}

        

        

        

        

    </style>

        <!-- 此处编写样式 -->

</head>

<body>   

<div class="hourse">

     <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

          <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

          <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

          <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

          <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

          <div>

         <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>

         <p>欢迎来到慕课网学习新知识!</p>

     </div>

</div>

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

</body>

</html>


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

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

3回答
楚楚提 2019-06-27 17:23:17

magin合并的时候,对于float元素而言,margin并不是取两个margin中的最大值,而是将margin叠加起来:

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

  • 提问者 别话3 #1
    好的 谢谢
    2019-06-27 19:39:55
Miss路 2019-06-22 10:14:48

同学,你好。

786px是正好能够容纳三个小div的一个宽度,只要大于等于这个值就不会换行,你说的790px可以。但是如果不是正好是786px的话,里面的内容是不会居中的,你写一个1000px看看,右边会有很多的空白,显然效果不是很好看:

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

如果帮助到了你,欢迎采纳!

祝学习愉快!

Miss路 2019-06-21 17:29:13

同学,你好,外层的盒子应该设置786px才能正好容纳三个小的div,因为小div不仅有自身的宽度,还有边框,还有填充,都需要加上:

本身的宽度[(240px)+边框(1*2)+填充(10*2)]*3=262*3=786px

如果帮助到了你,欢迎采纳!

祝学习愉快!

  • 提问者 别话3 #1
    按照代码大盒子内容宽度 770加上填充20都到790里 应该也够了吧??还是说一定要大盒子内容宽度内容宽度就要大于等于786了
    2019-06-22 09:13:59
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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