麻烦老师看看代码需不需要改进
来源：3-4 编程练习
程序员小张
2020-04-04 17:47:28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.container{
border: 1px dotted gray;
width: 1364px;
}
.content1,.content2,.content3,.content4,.content5,.content6{
border: 1px solid gray;
float: left;
padding: 30px;
margin-left: 120px;
margin-bottom: 30px;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="content1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg
"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="content6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg
"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
1回答
-
同学你好，代码中的问题，如下：
1、左右两侧留有的间距不相等，一个盒子占据的宽度是420px（包括左右的内外边距），一行三个是1260px；因为左侧留有120px的空白，最右边也应该有120px，所以是1380px，建议：外层的盒子可以设置宽度1380px，例：
2、建议：设置下上外边距，效果会更好，例：
三个外边距可以统一设置，例：
3、参考效果图，每个单元是不需要设置内边距的，可以考虑去掉，去掉之后，大盒子的宽度也要修改哦。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题