希望在 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

未测试，但如果您使用的是 Flex，它会换行。所以你也想把你的列分解成行，类似于这样：

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

Answer 2

您几乎成功了，只是缺少一些 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/

Answer 3

请试试这个代码

<!DOCTYPE type>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Album example for Bootstrap</title>


    <style>
    .container
    {
    display: flex;
    flex-wrap: wrap;
    }

    .column
    {
    display: inline block;
    /*padding: 0.5em;*/
    display: block;
    width: calc(33.333% - 0.5em);
    }
    .column img{
      width: 100%;
    }
    </style>

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


  </body>
</html>

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

Looking to have 3 columns across 2 rows with the content only being images

html

css

css-multicolumn-layout