感觉还有很多问题，请大家帮我看一看，谢谢。
<!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>26
收起
正在回答
2回答
zys宽度设置的有问题，图片宽度为240px，所以设置zys宽度应为240px，如果想要实现整体居中可以在外层包裹一层div盒子，用margin实现居中即可，参考修改代码：
自己可以再测试一下哦，祝学习愉快~~
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>相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星