麻烦老师看看有没有什么需要改善的？
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{padding:0;margin:0;}
.container{
width:800px;
margin:0 auto;
border:1px dashed #ccc;
overflow:hidden;
padding:10px;
}
.container .image{
float:left;
border:1px solid #ccc;
margin:12px;
}
.image div{
padding:5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="image" >
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
</body>
</html>
正在回答
同学你好，整体思路很棒，有如下两个细节可以改善一下：
img自带间距，导致图片下的文字垂直居中存在误差，如下所示：
建议修改：给img添加display:block;属性，消除间隙。
建议调整最外层大盒子的padding值，让图片与图片之间的间距，和图片距离大盒子之间的间距保持一致。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星