将 div 设置为具有 2 列的动态宽度答案

【问题标题】：styling divs to have 2 columns with dynamic widths将 div 设置为具有 2 列的动态宽度
【发布时间】：2013-01-21 00:57:14
【问题描述】：

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

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

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

.commentText, .username {
  float:left;
}

但是，如果两个内部 div 的内容之和大于外部 div 的宽度，则第二个内部 div 低于第一个内部 div。

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

我得到了什么：

我想要什么：

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

谢谢！

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

【问题讨论】：

您是否以某种方式删除了最后一条评论，还是我发现的 text-align:right？
其实是text-align: center，但是右边被截断了。我会解决的。
顺便说一句，您错过了username 课前的一个句点。 .commentText, username { 应该是 .commentText, .username {
好点，但实际上它在复制代码时被意外删除了。对不起。
如果你可以使用它，你可以申请display:table-cell到.username和.commentText。但是请考虑table-cell 的跨浏览器兼容性——我认为IE6/7 不支持它。 jFiddle here

标签： css html column-width

【解决方案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;
}

【讨论】：