老师请帮忙看看我的代码怎么实现不到题目要求的那个程度呢？
来源：3-4 编程练习
Aurora_Meteor
2020-02-20 22:16:21
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 此处编写样式 -->
<style type="text/css">
.container {
width: 800px;
border: 1px dashed #ccc;
overflow: hidden;
padding: 10px;
}
img {
margin-bottom: 5px;
}
p {
margin: 5px 3px;
}
.fl {
border: 1px solid #ccc;
margin: 10px;
float: left;
}
.ff {
clear: both;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="fl">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl ff">
<div>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>
老师我感觉我的代码好像有些太复杂了，但是又不知道该怎么简化。而且每行最后那个小模块和大容器右边的距离看起来也不等于左侧的距离，该怎么修改呢？
3回答
-
同学你好，布局是不错的，修改外层大盒子宽度就好，是需要计算的。
每个小盒子占据的宽度是：图片宽度240+左右边框2+左右margin共20=262，那么三个小盒子占据的宽度是262*3=786px
另外代码样式并不复杂，不需要再优化了。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-02-21 -
好帮手慕星星
2020-02-21
同学你好，问题解答如下：
1、图片宽度是通过图片的自身属性确定的
2、每个小盒子设置了浮动，浮动的元素脱离文档流，外边距是不重叠的，是相加的结果。课程中讲解的元素是在文档流中，没有设置浮动，水平以及垂直方向外边距都是重叠的结果。
自己可以再测试理解下。
0h020-02-21 -
Aurora_Meteor
提问者
2020-02-20
这是效果图
0
相似问题