样式div有2列动态宽度

Question

我确信这已被覆盖，但我不确定要搜索什么。

我在1 div中有2个div。 2个内部div我float:left所以有2列。 第一个div是类.username。第二个div是类.commentText。外部div被称为.comment：

.comment{
  border: 0px;
  clear: both;
}

.commentText, .username {
  float:left;
}

但是，如果2个内部div的内容之和大于外部div的宽度，那么第二个内部div将下降到第1个内部div之下。

例如：在下图中，时间戳位于用户名div中。评论在commentText div中。请注意底部注释会在时间戳下面出现问题。

我得到了什么：

我想要的是什么：

我想要的是底部注释上的commentText，以保持它只有1行并且只是垂直增长时的宽度。另请注意，每个注释中的.username div具有不同的宽度。

谢谢！

编辑：   我刚刚找到了一个不错的解决方案，其中我使用max-width：20％用于.username，最大宽度：79％用于.commentText，但问题是我不想限制用户名div的宽度。如果用户名很短并且评论很长，那么它不会一直填充到外部div的右侧。

Answer 1

据我所知，它并非在所有时代的所有浏览器上都是交叉兼容的，但是@bybe给了我一个fiddle的建议来使用display：table-cell。这很有效。

.commentText, .username {
    display:table-cell;
    margin:0px 0px 10px 0px;
}

.username {
    padding: 0px 15px 0px 0px;
    white-space:nowrap;
}