css - 将元素的底部边缘定位在容器内

Question

我有一个顶部填充为 400 像素的容器 div（红色）。（蓝色）内的内容可以是任意高度。我还有另一个元素（绿色），宽度固定但高度可变，具体取决于内容。

我希望能够将绿色元素的底部边缘定位在蓝色内容的顶部（即距离红色容器顶部 400 像素）。

示例标记

<div class="red-container">

    <div class="green-thingy">Some text here</div>

    <div class="blue-content">
        <p>blah blah blah...</p>
        <p>blah blah blah...</p>
    </div>
</div>

任何人都知道任何可以让我这样做的 CSS 技巧吗？

Answer 1

您不能相对于父元素的顶部定位元素的底部。

添加另一个高度为 400 的元素位于容器的顶部，并将绿色 div 放入其中位于底部的位置。