麻烦老师批改一下，谢谢。
来源：2-14 编程练习
啊变
2019-07-18 16:24:08
<!DOCTYPE html>
<html>
<head>
<title>混合布局</title>
<style type="text/css">
.top{
width: 1000px;
height: 250px;
background: #87cefa;
margin: 0 auto;
}
img{
margin: 15px 65px;
text-align: center;
}
.bottom{
width: 1000px;
height: 100px;
background: #dda0dd;
margin: 0 auto;
}
</style>
</head>
<body>
<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>
</body>
</html>写回答
1回答
-
你好同学，因为每一组图片都设置左右间距，中间叠加的间距比较大，没有办法实现图片之间间距相等。
实现原理：以上部分为例，使用父容器盒子的总宽度减去图片的宽度，并除以3，就是上部分每一个间距的值。例如设置父元素宽度为1000px ,计算就是1000-720（两张图片的宽度）为280px ，一共三处间距，所以除以3。即每一个图片左间距设置为93.33px. 高度也可以这样计算，或者去掉高度，给父容器设置上下填充的值一样实现间距相等。
祝学习愉快，望采纳。
0
相似问题