将浮动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％来做到这一点。 但是，如果我调整窗口大小（布局不是固定宽度），那看起来并不好。

一张桌子是简单的出路。 但是css没有解决方案吗？

Answer 1

为什么不代替浮动注释框，而给左边缘足够高的距离以清除头像图像。 例如，如果化身为margin-left: 155px;宽，则在注释框margin-left: 155px; 由于注释框是一个div（块元素），它将自然填充父div的剩余空间。

此处的jsfiddle示例： http ： //jsfiddle.net/UHksQ/

造型：

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

Answer 2

Dave Haigh的解决方案是一种合理的方法。 如果您确实真的坚持使用浮标，则可以将容器的左侧填充到肖像的宽度，然后将肖像的左边距设置为100％。 这有点愚蠢，但是会起作用。

jsFiddle演示： http : //jsfiddle.net/Malkyne/FZcPq/