将一些HTML元素与父级的底部对齐

Question

我有一系列具有以下HTML结构的产品：

<div class="parent">
    <img src="myimg.jpg" />
    <div class="title">My Title</div>
    <div class="buttons"></div>
</div>

这些父母中有许多人彼此相邻。首先我有一个问题，他们往往会有不同的高度（由于标题的长度不同）。我使用display: flex;修正了它，所以现在它们都具有相同的高度。但是我需要将buttons div粘贴到parent的底部，而标题和图像应该保持原样。因此，我希望按钮和之前的parent子项之间有空格，而不是在按钮下方的底部有空格。

我试图为此找到解决方案，但所有结果都会导致这个CSS：

.parent { position: relative; }
.buttons { position: absolute; bottom: 0; }

此解决方案对我不起作用，因为按钮可能会与标题重叠。因此，到目前为止我能想到的最佳解决方案是使用等于按钮高度的底部填充：

.parent { display: flex; position: relative; padding-bottom: 100px; }
.buttons { position: absolute; bottom: 0; height: 100px; }

但我不确定它是否是最佳解决方案，因为按钮的高度可能会改变甚至是动态的。有更好的解决方案吗？

编辑：

这是一个展示问题的片段。第一个父母有2个按钮，而第二个父母只有一个按钮，这是有意的 - 有些产品可能有不同数量的按钮，这也是我无法使用padding-bottom解决方案的原因之一。

#wrap { display: flex; }
.parent { display: inline-block; position: relative; padding-bottom: 100px; width: 100px; border: 1px solid black; padding: 10px 20px 20px; margin: 0 5px 10px; }
.buttons { position: absolute; bottom: 0; height: 100px; }
.button-one { background: green; }
.button-two { background: red; }
.button-one, .button-two { margin: 15px 0 0; }

<div id="wrap">
  <div class="parent">
    <img src="myimg.jpg" />
    <div class="title">My Title</div>
    <div class="buttons">
      <div class="button-one">Button one</div>
      <div class="button-two">Button two</div>
    </div>
  </div>
  <div class="parent">
    <img src="myimg.jpg" />
    <div class="title">My TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy TitleMy Title</div>
    <div class="buttons">
      <div class="button-one">Button one</div>
    </div>
  </div>
</div>

Answer 1

最简单的方法是在“标题”中添加padding-bottom。或者，如果您可以更改HTML结构，那么这是更好的选择。

在HTML中尝试此布局。

Answer 2

我不确定这是否是问题，但我认为您需要添加高度和宽度

Answer 3

尝试添加clear: both;和float: left;将其发送到其父级的最底层。

像这样：

.buttons { position: absolute; bottom: 0; height: 100px; clear: both; float: left; width: 100px; }