html - 使用动态内容使段落保持在底部

Question

所以我在网站上有一些 block ，看起来像这样:

三个街区彼此相邻。现在这里的问题是标题可以是一行的长度，就像在图像中一样，到 4 行的长度。根据标题的长度，我成功地更改了内容，使内容保持在 block 内并且不会溢出。

但是，无论内容和标题有多长，所有三个 block 中的按钮都需要处于同一高度。我想我可以让它们粘在 block 的底部，所以我已经给了 parent 一个 position: relative 和 child 一个 position: absolute，但他们只是不想贴底，他们还是出现在了不同的高度。我还胡思乱想了 display: flex 和 position: fixed，但我无法做到这一点。

当然，我可以使用 jQuery 管理 block 的位置，这取决于标题的高度或类似的东西，但我真的想尽可能少地使用 Javascript，因为性能。

每个 block 的 HTML 是:

<div class="post-content">
    <div class="post-header">
        <span class="cat"><a href="some-url" title="some-title">Here goes the category</a></span>
        <h2><a href="some-url">Here goes the title</a></h2>
        <span class="date">1 january 1970</span>
    </div>

    <div class="post-entry">
        <p>This is the content of the post</p>
        <p><a href="some-url" class="more-link"><span class="more-button">Read more link</span></a></p>
    </div>
</div>

我也可以发布 CSS，但它只包含一些背景属性、文本填充等。

所以我需要的是无论标题或内容有多长，按钮总是需要粘在底部。

提前致谢!

Answer 1

问题(在评论中讨论后)是 position: relative; 设置在 post-entry 上，而不是外部容器 post-内容。只要其他规则设置正确，更改它就可以解决问题。