老师帮我检查一下哪里不对?
来源：3-4 编程练习
原来是晓琪_
2019-04-15 00:40:59
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{margin: 0;padding: 0;}
.container{width: 900px;
border:gray 1px dashed;
overflow: hidden;
zoom:1;}
.one,.two,.three,.four,.five,.six{
float:left;
margin: 8px;
padding: 0px;
border:gray 1px solid; }
.oo{padding: 20px;
margin: auto;
} </style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="oo">
<div class="one">
<div class="tp"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
</div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="two">
<div class="tp"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="three">
<div class="tp"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="four">
<div class="tp"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="five">
<div class="tp"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg
"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
<div class="six">
<div class="tp"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></div>
<div class="wz">欢迎来到慕课网学习新知识！</div>
</div>
</div>
</div>
</body>
</html>
我不太懂为什么显示不对。。
1回答
-
好帮手慕夭夭
2019-04-15
你好同学，问题如下：
1.因为设置浮动的父元素是oo,代码中并没有直接给oo设置清除浮动，所以oo的高度还是塌陷的，导致上边距比较大。
2.右边的间距大是因为父容器宽度太大了，而内容铺不满，右边会有剩余的空间。
如下调整：
大盒子的宽度调整一下，另外，间距和填充设置一样保持间距相等，清除浮动一定要给父元素直接设置，而不是给爷爷元素设置哦
祝学习愉快 ，望采纳。
0
相似问题