基础6不等高元素的块网格

问题描述：

在基础6块网格中，如何制作紧接在其父元素之后放置的非等高元素的网格。基础6不等高元素的块网格

实施例（图像）因此，所有的底灰色块向上移动到橙色块所处的位置，而不是对自己换行符

<div class="row small-up-1 medium-up-6 large-up-4"> 
    <div class="column column-block f1" style="height: 100px;"> 
     <div> 
      <h1>block 1</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1" style="height: 250px;"> 
     <div> 
      <h1>block 2</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 3</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1" style="height: 175px;"> 
     <div> 
      <h1>block 4</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 5</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 6</h1> 
      <p></p> 
     </div> 
    </div> 
    <div class="column column-block f1"> 
     <div> 
      <h1>block 7</h1> 
      <p></p> 
     </div> 
    </div> 
</div>

是如果这是不可能的基础上，他们比任何人都可以建议采用这种技术吗？

在此先感谢大家。

答

如果你想使用基金会的块网格，我建议使用Masonry。这是一个guide on how to implement it with Foundation，但请注意这是Foundation 5，因此您的块网格类的语法将略有不同。

或者，您可以使用CSS列实现类似的效果，利用column-gap属性。 Full example here。

.parent { 
    column-gap: 30px; 
}

基础6不等高元素的块网格

相关推荐