请老师帮忙看看~
来源：3-4 编程练习
Obliviate2892629
2020-09-13 14:09:52
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
width:770px;
border:dashed grey;
overflow:hidden;
zoom:1;
margin:0 auto;
}
.one,.three,.four,.six{
margin:10px 10px;
float:left;
border:solid grey 1px;
}
.two,.five{
margin:10px 0;
float:left;
border:solid grey 1px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="one">
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="two">
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="three">
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="four">
<div><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="five">
<div><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
<div class="six">
<div><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div>欢迎来到慕课网学习新知识</div>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，如下所示，小盒子与小盒子之间的间距和小盒子与大盒子边框之间的间距不相等。
建议参考如下步骤修改：
1、调整盒子的类型一致，方便统一设置样式
2、给每个小盒子设置固定宽度（刚好等于图片的宽度），通过计算调整盒子间距
3、由于垂直方向的margin会相加，所以需要给外层盒子设置上下padding值，调整所有间距一致
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题