麻烦老师细心检查一遍代码是否正确书写规范,非常感谢(●'◡'●)!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.content{
width:670px;
/*background-color:pink;*/
border:1px dashed #ccc;
overflow:hidden;
zoom:1;
padding-bottom:10px;
margin:0px auto;
}
img{
width:200px;
height:80px;
}
.one,.two,.three,.four,.five,.six{
float:left;
margin:10px;
border:1px solid #ccc;
}
span{
font-size:15px;
margin-left:5px;
height:30px;
line-height:20px;
}
</style>
</head>
<body>
<div class="content">
<div class="one">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="two">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="three">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="four">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="five">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
<div class="six">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/><br/>
<span>欢迎来到慕课网学习新知识!</span>
</div>
</div>
</body>
</html>
正在回答
同学你好,代码实现的很简洁,可以把父盒子的padding-bottom去掉:
因为每一列都设置的有margin,所以可以不需要加这个。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星