基础5网格对齐彼此

Question

我一直在处理一个问题太长时间，并且没有找到任何适当的解决方案。我目前正在使用foundation5框架上的网格产品显示，并且找不到合适的jscript或css代码来相互调整我的产品。 以下是它现在的样子：

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

我需要更大的产品窗口来填充上面较小的窗口空白区域。 希望有人能够提供帮助，谢谢！

Answer 1

如果你知道divs的高度很简单，只需将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

Answer 2

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

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

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

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

只需检查上面较小的单元格的高度，再加上下面较大的单元格，不要超过两行的高度，否则你可能需要额外的东西才能满足要求。