将图像排列成行[重复]答案

【问题标题】：Arrange Images in Rows [duplicate]将图像排列成行[重复]
【发布时间】：2018-09-17 04:28:56
【问题描述】：

如何将图像（具有不同高度）排列成行，以使连续行中的图像之间没有任何空间？假设图像 1 在第 1 行，图像 k 在第 2 行，所以即使图像 1 不是第 1 行中最高的元素，我也不希望 1 和 k 之间有空格？

只有 CSS 才需要实现。

如何做到这一点？

像这样的 1、2、3 和 4 是图像

预期的样本是

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/flex
@slash197 flex 以这种方式工作的任何示例
你试过什么？你的预期结果是什么？发布您的代码。
@slash197 Grid 是为此而生的，flex 不会这样做。 css-tricks.com/snippets/css/complete-guide-grid
这门 Wes Bos 的课程是免费的，你可以在那里完成。在这里查看cssgrid.io

标签： javascript html css image

【解决方案1】：

我想这就是你要找的。p>

来自W3Schools的示例

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

<!DOCTYPE html>
<html>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

解决方案也可以使用 bootstrap-v4 样式 .card-columns 和 .card 来获得类似的结果： Bootstrap Docs

.card-columns {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}

.card {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  display: inline-block;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 2px;
  margin-bottom: 15px;
  width: 100%;
}
.card img {
  width: 100%; height: auto;
  margin: 0;
}

<div class="card-columns">
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x100/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">  
      <img src="https://fakeimg.pl/250x600/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x200/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x100/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">  
      <img src="https://fakeimg.pl/250x600/">
    </div>
  </div>
  <div class="card">
    <div class="img-wrapper">
      <img src="https://fakeimg.pl/250x200/">
    </div>
  </div>
</div>

【讨论】：

同意你的解决方案，但这里的顺序是垂直的，我想要水平顺序
这只是一个不同的选择。但是这里的顺序有点奇怪，比较适合大量卡片。