三个图像并排的垂直砌体布局

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 之间有一个 space。

我想通过将每个图像向上推到上面的图像，但不剪切图像的高度，使彼此下方的图像之间没有 space。

我该怎么做？

Answer 1

我终于得到了这个 well-working 代码：

<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>

三个图像并排的垂直砌体布局

Vertikal masonry layout with three images side by side

html

css

image

masonry