Question

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

只有CSS才能实现。

如何实现这一目标？

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

预期的样本是

Answer 1

我认为这就是你要找的东西。

来自W3Schools

的示例

＆＃13;

* {
    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%;
    }
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

按行排列图像

2 个答案: