css - 将 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 低于第一个内部 div。

例如：在下图中，时间戳在用户名 div 中。评论在commentText div 中。请注意时间戳下方的底部注释凸起。

我得到什么：

我想要的是：

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

谢谢！

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

Answer 1

我知道它在所有时代的所有浏览器上都不是交叉兼容的，但@bybe 给了我一个使用 display:table-cell的建议。这很好用。

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

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