请问是否正确，还需要优化吗
来源：3-4 编程练习
银野
2020-11-21 09:00:46
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<style>
*{
padding:0;
margin:0;
}
.container{
/*width:726px;*/
width:786px;
overflow:hidden;
border:1px dotted gray;
}
.one,.two,.three{
width:240px;
float:left;
border:1px solid gray;
margin:10px;
}
.four,.five,.six{
width:240px;
float:right;
border:1px solid gray;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="one"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
<div class="two"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
<div class="three"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
<div class="four"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
<div class="five"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
<div class="six"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/><p>欢迎来到慕课网学习新知识！</p></div>
</div>
</body>
</html>
1回答
-
同学你好，图片与图片之间和图片与大盒子之间的间距不相等。如下图所示：
建议：可以给大盒子添加padding属性，调整间距一致。
建议优化：由于浮动元素超出大盒子宽度时，会自动换行显示，所以可以统一设置小盒子左浮动样式，简化代码书写，示例：
祝学习愉快~
1
相似问题