Question

我正在寻找一种仅用于css的解决方案，它将完成下面所示的操作。这里关注的领域是图像右侧的内容。

Fig. 1

例1：最小的热门内容：当只有一行热门内容（此处显示为“hi”）时，请将底部内容（下面的所有内容）刷新到底部，如图所示。

Fig. 2

例2：更多热门内容：此处显示的内容较多，但仍不足以保证其下方元素的位置偏移。

Fig. 3

例3：很多重要内容：显然，底层元素现在需要转变。

基本上，代码目前只有两个<div>元素堆叠在一起。

<div id="top">Lorem ipsum...</div>
<div id="bottom" style="margin-top:30px;">...</div>

将底部元素设置在固定位置很容易，但我希望它们在有意义时向下移动（如示例3所示）。任何可能的css解决方案来实现这种精确的行为？

Answer 1

使用min-height例如

#top{min-height:80px;}