3-4课后习题问题
来源：3-4 编程练习
慕用2429104
2019-09-06 21:08:05
老师帮忙看一下，代码哪里需要改进
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.content{
width:800px;
height:auto;
background-color: blueviolet;
border:1px dashed gainsboro;
margin:0 auto;
padding:10px;
}
.top , .bottom{
width:800px;
margin:0 auto;
overflow: hidden;
}
.img{
float:left;
margin:10px;
}
p{
display:block;
border:1px solid gainsboro;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
<div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
</div>
<div class="bottom">
<div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
<div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习!</p>
</div>
</div>
</div>
</body>
</html>
1回答
-
你好同学，宽度设置的太大了，所以右侧剩余的间距就比较大：
建议代码如下优化：
可以按F12查看一下小盒子的实际宽度：
一个盒子的实际宽度乘以3，再加上margin所占据的空间，就是父容器所以设置的总宽度：
小盒子不用在单独嵌套div，如下去掉：
祝学习愉快，望采纳。
0
相似问题