问按行排列图像
EN

Stack Overflow用户

提问于 2018-04-07 06:49:30

回答 2查看 3K关注 0票数 0

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

只有使用CSS才需要实现。

如何做到这一点？

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

一个预期的示例是

html

css

image

javascript

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 2

Stack Overflow用户

发布于 2018-04-07 07:15:54

我想这就是你要找的。

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

票数 1

Stack Overflow用户

发布于 2018-04-07 07:22:07

一个解决方案也可以使用引导程序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>