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

编程问答 2023-02-14

问题描述

我有以下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之间都有一个空格。

我想通过将每个图像向上推至上方图像，而又不剪切图像高度来达到彼此下方图像之间没有空间的目的。

我该怎么做？

解决方法

我最终得到了运行良好的代码：

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