请老师帮忙检查 谢谢！
来源：2-14 编程练习
weixin_慕斯卡3305140
2020-03-01 02:29:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style type="text/css">
.wrap {
width: 80%;
background: gray;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
}
.wrap>div{
width: 100%;
height: auto;
}
.top{
padding:20px 0 ;
background: #abcdef;
text-align: center;
}
.top>div{
float: left;
width: 50%;
box-sizing: border-box;
}
.top:after{
content: "";
display: block;
clear:both;
}
.top img{
display: block;
width: 250px;
margin: 0 auto;
}
.top>div:first-child{
padding-left: 40px;
}
.top>div:last-child{
padding-right: 40px;
}
.lower{
background: #eebbbb;
padding:30px 0;
display: table;
}
.lower div{
display: table-cell;
}
.lower img{
display: block;
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" alt="pic"></div>
<div><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" alt="pic"></div>
</div>
<div class="lower">
<div><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt="pic-small">
</div>
<div><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt="pic-small">
</div>
<div> <img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt="pic-small">
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，如下所示，使用百分比设置外层盒子宽度，导致在大屏幕下打开页面，盒子宽度增加，且，图片之间的间距不相等。
建议：老师这里给同学提供一个思路。以第一行为例：设置整体的宽度为固定值， 减去两个图片的宽度（可以给图片设置固定的宽度，刚好等于图片自身的宽度360px）, 就是剩余间距的宽度 , 一共有三个间距 , 所以除以3就是每一个间距的大小，然后给图片设置左外边距即可， 如下：
第二行也是同样的实现思路，同学自己下去调整下即可。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题