css - 将 float div 扩展到父容器的 100% 宽度

Question

我有一个包含评论的 div 容器。它被设置为向左浮动，头像容器就在它旁边(它也向左浮动)。这是屏幕截图。

白色评论容器的css:

.comment_content{
    float: left;
/*
    width: 86%;
*/
    margin-left:5px;
    padding-left: 15px;
    background: url(http://video.chubbyparade.com/img/arrow_left.png) no-repeat 0 8px;
}

我想将此容器设置为填充父容器中剩余空间的 100%。

如果我将它设置为 width:100%，我会得到一个换行符(因为它现在填充了父容器宽度的 100%)。

如何设置评论容器来填充剩余空间？我曾经通过将其设置为 width:86% 来做到这一点。但是，如果我调整窗口大小(布局不是固定宽度)，那看起来不太好。

一张 table 是最简单的出路。但是难道没有 css 的解决方案吗？

Answer 1

为什么不 float 评论框，而只提供足够高的边距以清除头像图像。例如如果头像是 150px 宽，给评论框 margin-left: 155px; 因为评论框是一个 div( block 元素)它自然会填充父 div 的剩余空间。

此处为 jsfiddle 示例: http://jsfiddle.net/UHksQ/

样式:

.avatar {
    float: left;
    width: 150px;
}
.comment {
    margin-left:155px;
}