float 3-4 编程练习

来源：3-4 编程练习

楊同学

2019-06-17 01:04:57

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style>
          *{margin:0;
            padding:0;
          }
          .con{
            padding: 10px;   
            border:1px dashed #D0D0D0;           
            overflow: hidden;
            zoom:1;
          }

          .one{
            margin: 10px;     
            border:1px solid #D0D0D0;
            float: left;

          }
          .clear{clear: both;}


        
          img{width: 300px;}
          p{text-align: center;line-height: 2.5em;}

        </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="con">
          <div class="one"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
          <div class="one"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
          <div class="one"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
          <div class="one clear"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
          <div class="one"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
          <div class="one"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" ><p>欢迎来慕课网学习新知识!</p></div>
        </div>
</body>
</html>

请问：最外层的div没有设置宽度，但为什么是100%的宽度呢？而不是被里面div撑开的宽度。

要怎么设置才能跟参考一样呢？

谢谢。

写回答

2回答