麻烦检查一下
来源：2-14 编程练习
慕码人216111
2019-09-19 11:23:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
/*.content {*/
/* width: 1000px;*/
/* height: 400px;*/
/* margin: 0 auto;*/
/*}*/
/*.top {*/
/* width: 1000px;*/
/* height: 240px;*/
/* background-color: lightblue;*/
/*}*/
/*.top img {*/
/* width: 300px;*/
/* height: 200px;*/
/* margin-top: 20px;*/
/* margin-left: 133px;*/
/*}*/
/*.bottom {*/
/* width: 1000px;*/
/* height: 160px;*/
/* background-color:lightpin;*/
/*}*/
/*.bottom img{*/
/* width: 200px;*/
/* height: 80px;*/
/* padding-left: 100p;*/
/* padding-top: 40p;}*/
.top{width: 1000px;height: 240px;background-color: lightblue;margin: 0 auto;}
.top-pic{width: 50%; float: left;}
.top-pic img{width:300px;height: 200px;display: block;margin: 20px auto;}
.bottom {
width: 1000px;
height: 160px;
background-color: lightpink;
margin: 0 auto;
}
.bottom-pic {width: 33.3%;float: left;}
.bottom-pic img{
width: 200px;height: 80px;display: block;margin: 40px auto;
}
</div>
</style>
</head>
<body>
<!--<div class="content">-->
<!-- <div class="top">-->
<!-- <img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" />-->
<!-- <img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" />-->
<!-- </div>-->
<!-- <div class="bottom">-->
<!-- <img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" >-->
<!-- <img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" >-->
<!-- <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" >-->
<!-- </div> -->
<!--</div>-->
<div>
<div class="top">
<div class="top-pic"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"></div>
<div class="top-pic"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"></div>
</div>
<div class="bottom">
<div class="bottom-pic"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"></div>
<div class="bottom-pic"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"></div>
<div class="bottom-pic"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"></div>
</div>
</div>
</body>
</html>
2回答
-
好帮手慕星星
2019-09-19
同学你好，
代码布局没有问题，但是图片之间的间距还需要调整：
图片与边界之间以及图片和图片之间的间距应该是相等的，可以通过盒模型进行计算。
例如第一行中：
总宽度是1000px，每张图片宽度为300px，两张为600px，剩余400px均分3个空隙，一个空隙就是133.333px。如下：
自己可以计算下第二行，修改测试下。
祝学习愉快！
0 -
慕码人216111
提问者
2019-09-19
关于这个图片在DIV 中居中的问题！麻烦老师讲解一下。我这里的方法有没有什么问题？
0
相似问题