CSS 图像网格 - 处理填充

Question

我创建了这个网格：

* {
box-sizing: border-box;
position: relative;
}
.grid>* {
float: left;
padding-right: 1em;
}
.grid>*:last-of-type {
padding-right: 0;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-4 {
width: 33.3333333333%;
}
img {
display: block;
width: 100%;
border-radius: 5px;
}

<div class="grid">
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
</div>

使用最后.col-4的填充，我每次都有最后一个图像比其他图像大。我的问题是，我该怎么做才能以与其他图像相同的高度显示最后一个图像，但对于高度未知的图像，不保留.col-4padding-right？

Answer 1

如果我是你，我会使用flexbox。

body {
margin: 0
}
.grid {
display: flex;
flex-wrap: wrap;
width: 100%
}
.col-4 {
flex: 0 calc((100%/3) - .67em);
margin-right: 1em
}
.col-4:last-of-type {
margin-right: 0
}
img {
display: block;
width: 100%;
border-radius: 5px;
}

<div class="grid">
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
</div>

Answer 2

您可以从图像的宽度中删除1em，使其像其他图像一样缩放。

* {
box-sizing: border-box;
position: relative;
}
.grid > * {
float: left;
padding-right: 1em;
}
.grid > *:last-of-type {
padding-right: 0;
}
.grid > *:last-of-type img {
width: calc(100% - 1em);
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-4 {
width: 33.3333333333%;
}
img {
display: block;
width: 100%;
border-radius: 5px;
}

<div class="grid">
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">      
</div>
<div class="col-4">
<img src="https://i.stack.imgur.com/a6Ieo.jpg" alt="">
</div>
</div>

Answer 3

添加margin: /*some value in px*/;