2

我有一个包含评论的 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%。

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

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

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

4

2 回答 2

3

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

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

于 2012-06-01T20:50:40.657 回答
3

为什么不浮动评论框，而只是给一个足够高的 margin-left 来清除头像图像。例如，如果头像是 150px 宽，给评论框margin-left: 155px;，因为评论框是一个 div（块元素），它自然会填充父 div 的剩余空间。

这里的jsfiddle示例：http: //jsfiddle.net/UHksQ/

造型：

.avatar {
    float: left;
    width: 150px;
}
.comment {
    margin-left:155px;
}
于 2012-06-01T20:19:12.313 回答