如何将图像并排放置到 2 列中，“溢出”到下一行 [重复]答案

【问题标题】：How to Lay Images Side by Side into 2 Columns, 'overflowing' into the next row [duplicate]如何将图像并排放置到 2 列中，“溢出”到下一行 [重复]
【发布时间】：2021-07-22 07:22:37
【问题描述】：

如果已经有类似的问题被问和回答，我提前道歉。但是，我只能找到图像数量已知且固定的线程。

我需要并排放置图像，但会溢出到下一行。例如，如果有 3 个图像，那么前两个图像将在第 1 行并排，然后第 3 个图像将在下一行占据它的位置，在第 2 个图像下方有一个空白区域。如果有 5 张图片，则第一行两张，第二行两张，第一列最后一张图片。

我正在使用车把-v4.5.3.js。这是我的 HTML 代码：

<div class="row2" class="keep-together">
{{#each imageResults}}
   <div class="column imageContainer">
     <div class="defaultImage">{{{imageResult}}}</div>
   </div>
{{/each}}
</div>

下面是对应的 CSS：


.row2 {
    display: flex;
    flex-wrap: wrap;
}

.column {
  flex: 45%;
  padding: 5px;
}

.defaultImage img {
width: 100%;
}

.imageContainer {
    border: 1px solid black;
    width: 50%;
}

.keep-together {
    page-break-inside: avoid;
}

到目前为止，这就是我能够让它看起来的方式。我成功地将两个图像并排放置，但是，如果图像的数量恰好是奇数，（即最后一个图像本身在其行中），那么最后一个图像将占据整个图像分区。

【问题讨论】：

带有flex-wrap: wrap的flexbox
非常感谢@melancia！我能够使用这些建议并解决了我的问题。

标签： html css

【解决方案1】：

为了结束，我能够在这个解决方案的帮助下解决我的问题，How to make images in a CSS Grid lay next to each other and jump to another row when lacking space：

我将 HTML 更改为：

<div class="imageContainer">
  {{#each imageResults}}
    <div class="defaultImage">{{{imageResult}}}</div>
  {{/each}}
</div>

还有我的 CSS 到：

.defaultImage {
  height: 20rem;
  max-width: 100%;
  border: 1px solid black;
}

.defaultImage img {
  width: auto;
  height: 100%;
}

.imageContainer {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

这使我可以将图像放入网格中并正确溢出图像。

【讨论】：