html - Foundation5 网格相互对齐

Question

我处理一个问题的时间太长了，还没有找到合适的解决方案。我目前正在 foundation5 框架上使用网格产品显示，找不到合适的 jscript 或 css 代码来使我的产品相互对齐。 这是它现在的样子:

我至少需要看起来像这样:

我需要下面更大的产品窗口来填充上面较小的窗口的空白区域。 希望有人能帮忙，谢谢!

Answer 1

如果您知道 div 的高度，这很容易，只需将 position: relative 添加到更大的 div 并将其向上移动即可。

如果你不这样做，它非常相似，但你必须通过 JavaScript 设置 div 的高度和较大的 div 的偏移量。

HTML

<div class="row">
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner small"></div>
  </div>
</div>
<div class="row">
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner"></div>
  </div>
  <div class="small-4 column">
    <div class="inner big"></div>
  </div>
</div>

SASS

$div-height: 200px;
$big-div-height: 250px;
$small-div-height: 100px;

div.inner {
  height: $div-height;
  background: #99CCFF;
  border: 3px solid black;
  border-radius: 25px;
}

div.row {
  margin-top: 25px;
}

div.big {
  height: $big-div-height;
  position: relative;
  top: $div-height - $big-div-height;
}

div.small {
  height: $small-div-height;
}

CodePen example