在相邻的两个图像之间设置边距或填充。
在相邻的两个图像之间设置边距或填充。
提问于 2016-09-03 01:23:38
我试图在相邻的两幅图像之间设置边距或空隙，不知怎么说，边距似乎也是40%，也就是一幅图像的宽度。如何在2PX的图像之间设置我自己的边距/填充？
.certifications, .car {
display:inline-block;
position:relative;
vertical-align:middle;
}
.certifications img {
max-width: 40%;
height: auto;
}
.car img {
max-width: 40%;
height: auto;
}
#wrapper.car {
max-width: 100%;
height:auto;
} <div id="wrapper car">
<div class="car"><img alt=
"" src="http://lorempixel.com/100/100"></div>
<div class="certifications"><img alt=
"" src="http://lorempixel.com/100/100""></div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-03 01:27:23
将inline-block更改为inline。然后，您可以为间隔添加一个空白：
.certifications, .car {
display:inline;
margin-right: 10px;
position:relative;
vertical-align:middle;
}
.certifications img {
max-width: 40%;
height: auto;
}
.car img {
max-width: 40%;
height: auto;
}
#wrapper.car {
max-width: 100%;
height:auto;
} <div id="wrapper car">
<div class="car"><img alt=
"" src="http://lorempixel.com/100/100"></div>
<div class="certifications"><img alt=
"" src="http://lorempixel.com/100/100""></div>
</div>
Stack Overflow用户
发布于 2016-09-03 01:46:32
听起来好像你希望每幅图像都是包装宽度的40%。现在，每幅图像都是#wrapper > div宽度的40%。
- 从
#wrapper中删除不必要的样式 - 使
.certifications和.car占#wrapper宽度的40%，给它们右边的间距，并使图像完全宽度。 - 创建
.certifications和.car块，因为您的html中内联块之间的空白实际上将占用呈现页面中的空间。 - 将最大宽度改为宽度
.certifications,
.car {
display: block;
float: left;
position: relative;
vertical-align: middle;
width: 40%;
padding-right: 20px;/* could also use margin */
}
img {
width: 100%;
height: auto;
}<div id="wrapper">
<div class="car">
<img alt="" src="http://lorempixel.com/100/100">
</div>
<div class="certifications">
<img alt="" src="http://lorempixel.com/100/100">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39302432
复制相关文章
相似问题
腾讯云开发者
