如何防止底部对齐的 DIV 元素上的文本重叠答案

【问题标题】：How to prevent overlapping of text on bottom-aligned DIV element如何防止底部对齐的 DIV 元素上的文本重叠
【发布时间】：2012-03-25 06:35:21
【问题描述】：

当我尝试在 DIV 元素中使文本底部对齐时，我遇到的问题是，当上面的文本足够长以到达 DIV 元素的底部时，它会与底部对齐的文本重叠。这是代码：http://jsfiddle.net/Kw758/

<html>
<head>
<title>Date</title>
<style type="text/css">
#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
}

#date {
  margin-top: 1em;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
</style>
</head>
<body>
<div id="container">
    <span>
    This is a very very long text that might overlap with the date
    just below this.
    </span>
    <div id="date">
    January 1, 2012
    </div>
</div>
</body>
</html>

如何防止 SPAN 元素中的文本与 DIV 元素中的文本重叠？

我之所以将它与 'position' 属性底部对齐，而不是将日期设置为 'float: right' 是因为在我的实际问题中，DIV 应该设置一个最小高度，所以DIV 元素的下边框可能离 SPAN 元素中的文本很远。

【问题讨论】：

看起来和这个类似：stackoverflow.com/questions/499829/…
是的，但是在您的示例中，需要将文本包裹在底部定位的元素周围。此处并非如此，因此看起来要简单得多。

标签： css html position

【解决方案1】：

为#container 设置一个 padding-bottom 还不够吗？

#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
  padding-bottom: 30px; /* depending on font-size of span */
}

【讨论】：