感觉还有很多问题，请大家帮我看一看，谢谢。

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{padding:0;
            margin:0;
         }
         .fys{width:800px;
              height:auto;
              border:1px dashed gray;
              float:left;
               
         }
         .zys{
         float:left;
         width:200px;
         margin:20px 30px;
          
                  }
        p{width:200px;
            border-bottom:1px dashed gray;
            border-right:1px dashed gray;
            border-left:1px dashed gray;
            padding:0px 19px;
        }
                  
     </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="fys">
            <div class="zys"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>   
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
        </div>
</body>
</html>

AiChiRol 2018-03-04

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

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2018-03-04 17:31:42

zys宽度设置的有问题，图片宽度为240px，所以设置zys宽度应为240px，如果想要实现整体居中可以在外层包裹一层div盒子，用margin实现居中即可，参考修改代码：

自己可以再测试一下哦，祝学习愉快~~

收起回答

AiChiRol 提问者 #1

怎么看出图片的宽度是多少呢？打开网址然后用F12看吗

2018-03-06 09:40:06
好帮手慕星星回复提问者 AiChiRol #2

可以用F12看，或者是把图片下载下来，用图片查看器查看都是可以的。

2018-03-06 11:32:43

提问者 AiChiRol 2018-03-06 09:46:01

我外加了一个包裹zys的盒子，但是fys的宽度也要改动。我想问改动的这个数值是靠试出来的，还是算出来的呢。。。。我是猜了一个900px。

<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
     <style>
         *{padding:0;
            margin:0;
         }
         .fys{width:900px;
              height:auto;
              border:1px dashed gray;
              float:left;
                
         }
         .zys{
         float:left;
         width:240px;
         margin:20px 30px;
           
                  }
        p{width:200px;
            border-bottom:1px dashed gray;
            border-right:1px dashed gray;
            border-left:1px dashed gray;
            padding:0px 19px;
        }
        .dys{width: 780px
            margin:0 auto;
            overflow: hidden;
        }
                   
     </style>
</head>
<body>   
        <!-- 此处写代码 -->    
        <div class="fys">
            <div class="dys">
            <div class="zys"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p>   
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
               <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
            <div class="zys">
                <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识!</p> 
            </div>
        </div>
        </div>
</body>
</html>