请老师帮忙检查一下
来源：3-4 编程练习
老二次
2020-01-06 19:34:27
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
.big {
margin: 0px 22%;
height: 500px;
}
.kk {
border: 1px solid #bdbdbd;
float: left;
margin:20px;
}
p {
line-height: 25px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom:1;
}
.d1 {
width: 100%;
text-align: center;
margin: 20px 0px;
}
</style>
</head>
<body>
<div class="big clearfix">
<div class="d1 clearfix">
<div class="kk">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="kk">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="kk">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
<div class="d1 clearfix">
<div class="kk">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="kk">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="kk">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，检查元素，如下图所示，图片之间的间距与图片到外层盒子的间距存在误差。
建议：调整外层盒子的宽度为所有小盒子所占据页面实际宽度之和，并给外层盒子添加内边距，实现所有间距相等。结合margin： 0 auto;实现整体水平居中，效果实现会更好。
去掉小盒子的外边距
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题