如何折叠不同高度的列

Question

在我的网站上，我有6列图像。每个图像具有相同数量的图像，但由于图像的高度不同，所有列的高度都不同。

这很好，除非我尝试使其响应。当屏幕变小时，我将最后3列折叠到前3列之下。列浮动到左侧，所以我只使用

clear:left;

在第4列实现这一目标。但是，当我这样做时，列之间存在差距......

我需要消除这个差距。我希望下面的列能够触及上面的列。我怎样才能做到这一点？这可以单独使用CSS吗？

列有以下内容......

.imageWrap-col {
    float: left;
    max-width: 16%;
}

列容器有overflow:auto ...

#gallery {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: auto;
}

Answer 1

您可以尝试column css

＆＃13;

＆＃13;

body {/* or any container */
  -moz-column-width:180px;
  column-width:180px;
  column-gap:0.2em;
  max-width:800px;/* enough to hold four columns */
  margin:auto;
}
img {
  width:100%;/* or same value as column-width */
}

/* demo purpose */

html:before {
  content:' see snippet in fullpage, then resize window';
  display:block;
  text-align:center;
  font-size:1.6em;
}

＆＃13;

<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>
<img src="http://dummyimage.com/150x110"/>
<img src="http://dummyimage.com/150x150"/>
<img src="http://dummyimage.com/150x250"/>
<img src="http://dummyimage.com/350x150"/>

＆＃13;

＆＃13;

＆＃13;

它适用于任何带有任何盒子的容器：

＆＃13;

＆＃13;

div {
  -moz-column-width: 200px;
  column-width: 200px;
  column-gap: 0.2em;
}
figure,
img {
  display: inline-block;
  width: 100%;
  margin: 0;
}
figure {
  border: solid;
  box-sizing: border-box;
  margin-bottom: 0.2em;
}
figcaption,
h1 {
  text-align: center;
  padding: 1em;
}

＆＃13;

<div>
  <h1>see snippet in fullpage, then resize window</h1>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x110" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/150x250" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
  <figure>
    <img src="http://dummyimage.com/350x150" />
    <figcaption>
      caption text
    </figcaption>
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;