这段代码contrainer右边的border显示不太正确，应该是随着图片的，而不是整个网页的宽度

<!DOCTYPE html>
<html>
<head>
       <style type="text/css">
          *{ 
              margin:0;
              padding:0;
          }
          .container{
              width:100%;
              border:dotted 1px #ccc;
              margin:10px;
              overflow:hidden;
              zoom:1;
          }
           
          .content{
              border:solid 1px #ccc;
              margin:10px;
              float:left;
          }
           
       </style>
</head>
<body>   
     <div class="container">
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
          
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
          
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
          
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
          
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
          
         <div class="content">
             <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
             <p>欢迎来到慕课网学习新知识！</p>
         </div>
     </div>    
</body>
</html>

Di1860 2019-04-10

源自：float浮动 3-4 编程练习

收起

1回答

好帮手慕星星 2019-04-10 15:47:57

你好，经测试显示效果如下：

是因为container盒子设置了宽度为100%，所以边框是浏览器的宽度上添加的，所以会有这种效果。可以调整container盒子的宽度，如下：

每小盒子宽度是242px，三个小盒子就是726px，然后加上每个小盒子有左右margin值10px，所以就是726+10*6=786px。

给大盒子设置padding为10px是因为图片之间的间距是图片与边界之间的2倍，所以给大盒子加上padding值，这样每个部分间距就是一样的。

自己可以修改测试下，祝学习愉快！

收起回答

提问者 Di1860 #1

老师，在计算786px的时候为什么没有计算border的值呢？我测试的结果是，如果你加上6pxd border值，变成三行两列的图片展示效果，所以是不是contrainer的width应该为792px

2019-04-10 16:19:07
好帮手慕星星回复提问者 Di1860 #2

说的是小盒子的border吗？是添加上的，每个小盒子宽度里面包括border了，图片是240px，加上左右的border2px，每个小盒子就是242px。

2019-04-10 16:57:33