老师,图片与图片之间的间距,怎么等于左右边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;
padding: 0;
}
.main{
width: 1000px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -500px;
margin-top: -250px;
}
.topCon{
width: 1000px;
height: 300px;
background-color: #00FFFF;
text-align: center;
line-height: 300px;
}
.bottomCon{
width: 1000px;
height: 200px;
background-color: pink;
text-align: center;
line-height: 200px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 主界面 -->
<div class="main">
<!-- 上部内容 -->
<div class="topCon">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
<!-- 下部内容 -->
<div class="bottomCon">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>
正在回答
同学,你好。以上半部分为例,图片之间的间距加上左右边距应该等于图片外面盒子的宽度减去两张图片的宽度,再除以3就是图片之间的间距和左右的边距的值,给两张图片分别设置margin-left值为这个值就可以了。在这里,间距为(1000-360*2)/3为93.3,如图:
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星