html - 摆脱图片库中的空白

Question

大家好，我不确定这是否是正确的术语，但我在 bootstrap 中构建了一个图片库，使用砖石的想法，所以基本上，所有东西都有不同的尺寸，我的问题是我的画廊之间有一个巨大的差距我想知道如何摆脱它。我的问题是这样的:

我希望红色圆圈中的空间可以消失，我可以将它们连接在一起

HTML:

<div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>
    <div class="row">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap">
    </div>
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap">
    </div>
  </div>
</div>

如果有更简单的方法，请告诉我，我正在使用 boostrap 3，或者如果我在做一些愚蠢的事情，但我想用这个想法建立一个画廊，但这样我就可以摆脱那些大空间

谢谢

Answer 1

您正在尝试使用多行，这使得无法避免出现间隙。您所要做的就是，整个页面中只有一行，但是有多个列。那么就不会有差距。伪代码如下:

<div class=row>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
    <div class="col-sm-2">

         images 
    </div>
 <div>