将元素的底部边缘放在容器内

Question

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

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

示例标记

<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放在底部。