Question

当我尝试在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元素中的文本相距很远。

Answer 1

将填充底部设置为#container是不够的？

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

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

1 个答案: