老师请帮忙看看我的代码怎么实现不到题目要求的那个程度呢？
<!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://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl ff">
<div>
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
<div class="fl">
<div>
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" />
</div>
<div>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</div>
</body>
</html>
老师我感觉我的代码好像有些太复杂了，但是又不知道该怎么简化。而且每行最后那个小模块和大容器右边的距离看起来也不等于左侧的距离，该怎么修改呢？
正在回答
同学你好，布局是不错的，修改外层大盒子宽度就好，是需要计算的。
每个小盒子占据的宽度是：图片宽度240+左右边框2+左右margin共20=262，那么三个小盒子占据的宽度是262*3=786px
另外代码样式并不复杂，不需要再优化了。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
这是效果图
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星