Question

所以我基本上有两个宽度相同的容器，但根据其内容可以有不同的“高度”。我想两者都有相同的高度，采用最高的高度，所以我使用了一个完美的Flexbox。

现在我想知道是否可以在两者的底部对齐内容。

我基本上有：

<div class="flex-box">
    <div class="row event">MetTalks...</div>
    <div class="row shop">Digital Shop...</div>
</div>

.flex-box {
    display: flex;
    width: 66%;
    flex-direction: row;
    justify-content: flex-start;
    padding: 30px;
}

.row {
    flex: 1;
}

正如你所看到的here，他们同样占据了这一行（我只希望他们跨越前2/3），就像我想的那样，他们的高度是一样的。但我希望能够对齐底部的按钮。

我尝试了一些不起作用的东西，例如在里面制作一个表格div，但是我无法将高度拉伸到行div的100％

我也不能对按钮使用position：absolute，因为当它们从高度计算中取出时它们会重叠文本。

我甚至尝试在每个内部制作一个垂直对齐的柔性容器，但也不会伸展到100％高度

Answer 1

您可以通过绝对定位实现您想要的效果，而不会重叠文本。您可以为按钮设置固定高度，例如50px。然后，您必须将填充底部应用于等于按钮高度，+顶部和顶部的框。底部保证金。因此，如果您希望按钮位于盒子底部20px，则可以在盒子中添加90px（50 + 20 + 20）填充底部。如果您可以将代码提交给jsfiddle，那么帮助会更容易。

如何将Flex容器底部的内容与绝对值对齐？

1 个答案: