如何设置“绝对文本底部”以使进一步的文本向上扩展？

Question

这有点难以解释，所以我会尽力：

我希望将文本内容固定在 div 的底部 - 这样无论内容有多长，它始终设置在底部。

所以如果我有：

标题
内容 1
内容 2

内容 2 将在距父 div 底部约 20px 处排列，如果我有：

标题
内容 1

即使内容较少，内容 1 也会在距父 div 底部约 20 像素的位置排列。

这可以在没有表格的情况下动态完成吗？

Answer 1

是的，只需将headerand包装content成div这样：

<div id="parent">
  <div class="to_bottom">
    <h1>Header</h1>
    <p>Content 1</p>
    <p>Content 2</p>
  </div>
</div>

然后使用这个CSS：

#parent { position: relative }
.to_bottom { 
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
} 

更多信息：绝对定位可以相对于任何一侧：上、左、下、右。或者是组合。

所以：bottom: 0; right: 0锚定到右侧和底部，而不是顶部或左侧。它基本上变成：bottom: 0; right: 0; top: auto; left: auto。

同样，使用bottom: 20px; left: 0将其锚定到左下角，距底部 20 像素。