将浮动div扩展为父容器的100％宽度

我有一个包含注释的div容器。它被设置为向左浮动并且化身容器在它旁边（也浮动到左侧）。以下是截图。将浮动div扩展为父容器的100％宽度

enter image description here

白色留言容器的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％）。

如何设置注释容器来填充剩余空间？我曾经把它设置为宽度：86％。但是，如果我调整窗口大小（布局不是固定宽度），那看起来不太好。

一张桌子是最简单的方法。但是，有没有解决方案与CSS？

来源

2012-06-01 reggie

我在人们如何使出浑身解数，以避免使用表格来呈现表格数据赞叹不已。 –

您可以通过使用CSS显示属性而不使用表来实现类似于表的行为。也就是说，display：table table-row和table-cell – toniedzwiedz

我也建议在这里使用表格。想象一下你的评论有很多线条：如果'comment_content'漂浮在左边并且比图像更高，你会在图像下面遇到另一个问题。 – mixable

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

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

造型：

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

来源

2012-06-01 20:19:12

戴夫·黑格的解决方案是合理的做法。如果真的，确实坚持使用浮动，您可以将容器的左侧填充到肖像的宽度，然后为肖像留出100％的余量。这有点傻，但它会起作用。

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

来源

2012-06-01 20:50:40 Tess

将浮动div扩展为父容器的100％宽度

回答

相关问题