Question

嗨，大家好我不确定这是否是正确的术语，但是我在使用砌体的想法中建立一个图像库，所以基本上，一切都是不同的大小，我的问题是我的胆汁之间有巨大的差距我想知道我怎么能摆脱它。我的问题看起来像这样：

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

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或如果我做一些愚蠢但我想建立一个使用这个想法的画廊，但只是这样我可以摆脱那些大空间< / p>

由于

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>

摆脱图像库中的空白区域

1 个答案: