Foundation5网格相互对齐答案

【问题标题】：Foundation5 grid aligning according to one anotherFoundation5网格相互对齐
【发布时间】：2015-02-11 23:53:16
【问题描述】：

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

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

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

【问题讨论】：

标签： html css grid zurb-foundation zurb-foundation-5

【解决方案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

【讨论】：

【解决方案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]
}

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

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

【讨论】：