老师，帮忙检查一下
来源：3-4 编程练习
慕前端7228914
2019-04-27 14:55:07
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<meta charset="UTF-8" />
<style type="text/css">
*{
padding:0;
margin:0;
}
p{
border:1px solid #eee;
width:240px;
height:20px;
}
.one{
width:800px;
height:auto;
overflow:hidden;
}
.oen,.two,.three{
float:left;
margin-right:10px;
margin-top:10px;
}
</style>
</head>
<body>
<div class="one">
<div>
<div class="oen"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p></div>
</div>
<div>
<div class="two"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div>
<div class="three"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/> <p>欢迎来到慕课网学习新知识！</p></div>
</div>
<div>
<div class="oen"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p></div>
</div>
<div>
<div class="two"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div>
<div class="three"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/> <p>欢迎来到慕课网学习新知识！</p></div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2019-04-27
同学你好，整体大盒子是有边框的，可以使用border属性添加下：
添加之后效果如下：
（1）外层盒子有些大了，导致右侧有剩余部分。
（2）图片与大盒子边框之间也是有距离的，和图片之间的间距相等。
可以参考如下修改：
可以将每一个小盒子外层的div去掉：
留着一个div包裹内容就可以。
给每个小盒子设置边框和margin值为10px，这样小盒子和小盒子之间间距是20px，小盒子和外层大盒子之间间距就是10px，所以在盒子中添加一个相同的padding值即可。大盒子宽度为786px是通过计算出来的：
小盒子宽度为242px（包括了左右的边框），那么3个就是242*3=726px，再加上每个小盒子左右边距10px，就是726+10*6=786px。
可以重新测试下，祝学习愉快！
0
相似问题