在容器中对齐评论日期右下角

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

将float: right; 用于您的.comment_date span 怎么样http://codepen.io/anon/pen/HpBGd

编辑： 同时删除 display:inline-block 并将 <p> 更改为 <div> 和 comment_date <span> 更改为 div，就像我在上面的代码笔中所做的那样（更新）我认为它会解决问题。