将注释日期在容器中右下角对齐

Question

我正在尝试将该灰色日期与该容器的右下角对齐。 它应该漂浮在容器的底部而不是文本的末尾。 我为它制作了一个CodePen：http://codepen.io/adrianTNT/pen/IciCH

有什么想法吗？ 我可以用一个凌乱的代码来完成它，但我确信必须有一个干净的方法来使用正确的CSS代码。

body{
    background-color:#0e91a1;
  padding:10px;
}

.comment{
    padding:10px;
    margin:0px;
    margin-bottom:10px;
    background-color:#FFF;
    border-radius:4px;
    box-shadow: 1px 1px 1px #555;
    min-height:50px;
}

.comment_text{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
}

.comment_date{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
    color:#CCC;
    display:inline-block;
    float:right;
}

img.comment_avatar{
    border-radius:4px;
    position:relative;
    display:inline;
    margin-right:10px;
    margin-bottom:5px;

}
.comment_name{
    font-weight:bold;
}

Answer 1

以下是另一种解决方案：http://jsfiddle.net/7kdar/2/。

首先，.comment段落相对定位：

.comment{
    padding:10px;
    margin:0px;
    margin-bottom:10px;
    background-color:#FFF;
    border-radius:4px;
    box-shadow: 1px 1px 1px #555;
    min-height:50px;
    position: relative;
}

其次，.comment_date完全使用.comment坐标定位：

.comment_date{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", 
                "Lucida Sans Typewriter", Monaco, "Courier New";
    color:#CCC;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

第三，为了确保.comment_date与.comment_text不重叠，将在.comment_date的末尾添加一个新的不可见元素，该元素是最大日期的大小：

.comment_text:after {
    content: "3 Jul 23:36";
    color: white;
}

Answer 2

在http://codepen.io/anon/pen/HpBGd

上使用float: right; .comment_date的{​​{1}}怎么样？

编辑：同时删除span并将display:inline-block更改为<p>，将<div> comment_date更改为div我已经完成了上面的codepen（更新），我认为它将解决问题。