Html 基础5网格相互对齐

我处理一个问题的时间太长了，还没有找到合适的解决办法。我目前正在使用foundation5 framework上的grid product display，找不到适当的jscript或css代码来将我的产品相应地彼此对齐。 下面是它现在的样子：

我至少要像这样：

我需要下面较大的产品窗口来填补上面较小的窗口空白。

---

希望有人能帮忙，谢谢

如果你知道div的高度很简单，只需添加位置：相对于你的大div，并将其移到上面

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

HTML

---

<>你不能轻易地让基础网格做它提供一个规则的网格，这就是它的目的。但是，您可以在相关的网格列中创建一个div来保存您的内容，并对其进行定位以获得您想要的内容

给出包含网格的列位置：relative，然后在类名中给出新的div，类似于my class，然后执行以下操作：

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

现在，由于该单元格的内容将从内容流中取出，因此包含的行将能够接近剩余最大网格单元格的高度，即尚未完全定位的网格单元格的高度，并且您的内容将定位在该行的底部，向上延伸到所需的位置

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

$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;
}

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