html - Foundation5网格相互对齐

Question

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

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

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

Answer 1

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

如果你不这样做非常相似，但你必须通过 JavaScript 设置 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;
}

代码笔示例

Answer 2

您不能轻易地让 Foundation 网格做到这一点（它提供了一个常规网格，这就是它的用途）。但是，您可以在相关网格列中创建一个 div 来保存您的内容，并绝对定位它以获得您想要的内容。

给包含网格列位置：relative，然后在类名中给你的新 div 类似 my-class，然后执行：

.my-class {
    position : absolute;
    bottom : 0;
    left   : 0;
    width  : [same percentage width of the screen as your other columns]
}

现在，由于该单元格的内容将被从内容流中取出，包含行将能够关闭到剩余网格单元格中最大的高度（即那些尚未绝对定位的单元格），并且您的内容将位于该行的底部，并根据需要向上延伸。

只需检查上方较小单元格的高度，加上下方较大单元格的高度，不要超过两行的高度，否则您可能需要额外的东西来满足这一点。