老师 帮忙检查下代码
来源：3-4 编程练习
lcy_18
2020-03-24 13:10:33
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
p {
margin: 0;
padding-bottom: 5px;
padding-left: 5px;
}
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.fl {
float: left;
border: 1px solid #CDCDCD;
margin:17px;
}
</style> </head> <body>
<div class="content">
<!--第一行-->
<div class="clearfix first">
<div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg" />
<p> 欢迎来到慕课网学习新知识!</p>
</div> <div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<p> 欢迎来到慕课网学习新知识!</p>
</div>
<div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<p> 欢迎来到慕课网学习新知识!</p>
</div>
</div> <!--第二行--> <div class="clearfix">
<div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe9770001e63102400135.jpg" />
<p> 欢迎来到慕课网学习新知识!</p>
</div> <div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe97d00011bda02400135.jpg">
<p> 欢迎来到慕课网学习新知识!</p>
</div>
<div class="fl">
<img src="http://img1.sycdn.imooc.com\/climg/590fe982000150ba02400135.jpg">
<p> 欢迎来到慕课网学习新知识!</p>
</div>
</div>
</div>
</body></html>
1回答
-
同学你好，代码中的问题，回答如下：
1、外层盒子是需要设置边框的，可以补充下，例：
2、盒子整体的宽度有些大了（默认100%），内容没有填充满，导致右侧的空白多。如下：
一个图片单元的宽度是276px（包裹左右的外边距与边框），一行三个，276*3 = 828px，所以大盒子的宽度应该是828px。例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题