html - 希望在 2 行中有 3 列，内容仅为图像

Question

我一直在尝试创建一个在顶部向下两行处有一个 3 的列。到目前为止，我只能创建第一行，但我不知道如何将其拆分到第二行。

.container {
  display: flex;
  justify-content: space between;
}

.column {
  display: inline block;
  padding: 0.5em;
  display: block;
  width: 33.333%;
}

<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>      

Answer 1

您几乎已经掌握了，您只是缺少一些 CSS 规则:

.container {
    display: flex;
    justify-content: space between;
    flex-wrap: wrap; /* added - this tells Flex to wrap onto a new line, if there is no space. */
}

.column {
    display: inline block;
    padding: 0.5em;
    display: block;
    width: 33.333%;
    box-sizing: border-box; /* added - this changes the way padding is applied, so it always stays at 33.33%, regardless of padding */
}

另外，如果你愿意，你可以添加这个样式让它看起来更漂亮一点:

.column img {
    display: block; /* removes the spacing underneath the image */
    width: 100%; /* sets the width to the parents width */
    height: 100%; /* set the height to the parents height */
    object-fit: cover; /* prevents image from stretching */
}

演示:https://jsfiddle.net/yx6h4emn/