并排的三个图像的垂直砌体布局[重复]

Question

我有以下html代码：

<style>
img {
    width:33.3333333%;
    float:left;
}
</style>

<img src="https://via.placeholder.com/500/FF0000?text=1">
<img src="https://via.placeholder.com/500x700/0000FF?text=2">
<img src="https://via.placeholder.com/500x600/008000?text=3">
<div style="clear:left;"></div>
<img src="https://via.placeholder.com/500/FFFF00?text=4">
<img src="https://via.placeholder.com/500/808000?text=5">
<img src="https://via.placeholder.com/500/00FFFF?text=6">
<div style="clear:left;"></div>

如您所见，image 1 和 image 4 之间以及 image 3 和 image 6 之间有一个空格。

我想通过将每个图像推到上面的图像上，但不削减图像的高度，从而在彼此下方的图像之间没有空间。

我该怎么做？

Answer 1

我终于得到了这个运行良好的代码：

<style>
.container  {
    width:33.3333333%;
    float:left;
}
img {
    width:100%;
}
.middle {
    margin-left:6px;
    margin-right:6px;
}
</style>

<div class="container">
    <img src="https://via.placeholder.com/500/FF0000?text=1">
    <img src="https://via.placeholder.com/500/FFFF00?text=4">
</div>

<div class="container" class="middle">
    <img src="https://via.placeholder.com/500x700/0000FF?text=2">
    <img src="https://via.placeholder.com/500/808000?text=5">
</div>

<div class="container">
    <img src="https://via.placeholder.com/500x600/008000?text=3">
    <img src="https://via.placeholder.com/500/00FFFF?text=6">
</div>