麻烦老师检查下，问题在下面
来源：3-4 编程练习
据说真的有神
2019-03-28 17:05:08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3-4编程练习</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.main{
width: 850px;
border: 1px darkgray dashed;
margin:20px auto ;
overflow: hidden;
zoom: 1;
}
.line1,.line2{
margin: 10px auto;
}
.box1{
margin: 20px;
float: left;
border: 1px gray solid;
}
</style>
</head>
<body>
<div class="main">
<div class="line1">
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
</div>
<div class="line2">
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
<div class="box1">
<ul>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<li>欢迎来到慕课网学习新知识！</li>
</ul>
</div>
</div>
</div>
</body>
</html>
2回答
-
好帮手慕夭夭
2019-03-28
你好同学 ，解答如下：
1.因为要求图片之间间距相等 ，如果盒子宽度多一点 ，内容铺不满 ，右边就会有剩余的空间 ，自然两边间距就不一样了
宽度小更好理解 ， 如果盒子宽度小于内容占用的宽度 ，那么放不下的内容就会被挤到第二行
2.这里是因为设置大盒子mian固定宽度影响的 ， 即使不设置line1也是可以实现两排显示效果的 ， 就像第一个问题中说到的 ，整体盒子设置固定宽度 ，一行恰好放三组图文 ， 到第四组 ， 就会被挤到第二行显示 。
所以这里把两个盒子去掉就行
另外 ，去掉以上后 ，它设置的间距也就没有了 。此时间距不相等 ，如下
浮动元素不会出现margin重叠 ，间距就会叠加 。
如下调整：
大盒子设置填充20px ，加上小盒子margin改为20px ，让两边间距加起来为40px与图片叠加的间距保持一致
祝学习愉快 ，望采纳 。
0 -
据说真的有神
提问者
2019-03-28
最外面盒子main的宽度必须是固定正好的，多一点少一点就会实现不了效果了，
设置line1.2区分两行效果，但是单设置一个line1试了一下也是可以实现效果，这是为什么，
麻烦老师在给优化下，应该还有其他问题，自己没有意识到的
0
相似问题