麻烦老师看看有没有什么需要改善的？
来源：3-4 编程练习
SpecialMe
2020-08-30 15:33:25
<!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://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="image">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，整体思路很棒，有如下两个细节可以改善一下：
img自带间距，导致图片下的文字垂直居中存在误差，如下所示：
建议修改：给img添加display:block;属性，消除间隙。
建议调整最外层大盒子的padding值，让图片与图片之间的间距，和图片距离大盒子之间的间距保持一致。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-08-31
相似问题