当我尝试在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元素中的文本相距很远.
为 #container 设置 padding-bottom 还不够吗？
#container {
position: relative;
border: 1px solid gray;
width: 200px;
padding-bottom: 30px; /* depending on font-size of span */
}