感觉这样写有点问题 请老师检查
来源：2-14 编程练习
SpecialMe
2020-09-03 23:30:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合布局</title>
<style type="text/css">
*{padding:0;margin:0;}
.main{
width:80%;
margin:0 auto;
overflow: hidden;
background: #cdecff;
}
.image1,.image2{
padding-top: 50px;
padding-bottom: 50px;
}
.image1{
padding-left: 150px;
float:left;
}
.image2{
padding-right: 150px;
float:right;
}
img{
display:block;
}
.small{
width:80%;
margin:0 auto;
background: lightpink;
text-align: center;
overflow: hidden;
}
.small div img{
padding:50px 60px;
}
.small div{
display: inline-block;
}
</style>
</head>
<body>
<div class="main">
<div class="image1"><img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/></div>
<div class="image2"><img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/></div>
</div>
<div class="small">
<div class="img1"><img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" alt=""/></div>
<div class="img2"><img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" alt=""/></div>
<div class="img3"><img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" alt=""/></div>
</div>
</body>
</html>
1回答
-
同学你好，这样写是有些问题，由于“.main”的宽度，设置成了百分比，在不同的分辨率下，它的实际宽度会不同，这样会造成图片之间的间距不相等，如下:
因此建议给“.main”设置固定宽度（计算一下），如下：
同理，“small”的样式，也需要调整，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快!
0h020-09-04
相似问题