div 填充父容器

Question

我有一个类似于我在下面模拟的评论。 .avatar和.actions的宽度为 static。 .comment没有。 我应该如何构建我的 HTML 和 CSS 以便.text将占用所有可用空间作为.comment更改它的宽度？

Answer 1

伪（未经测试）代码

<div class="comment">
    <div class="avatar"></div>
    <div class="actions"></div>
    <div class="text"></div>
</div>

CSS：

.avatar {float: left;}
.actions {float: right;}
.comment, .text {overflow: hidden;}

工作示例：

.avatar {
   float: left; 
   margin-right: 10px; 
   width: 100px; 
   height: 100px; 
   background: #fff;
}
.actions {
   float: right; 
   margin-left: 10px; 
   width: 30px; 
   height: 130px; 
   background: #fff;
}

.comment, .text {
   overflow: hidden;
}
.comment {
   background: #eee; 
   width: 600px; 
   padding: 10px;
}
.text {
   background: #fff;
}

HTML：

<div class="comment">
    <div class="avatar">..</div>
    <div class="actions">..</div>
    <div class="text">Your comment goes here<br>more text<br>more text</div>
</div>

Answer 2

编辑：我认为 clairesuzy 的方法要好得多。 而不是像我那样设置边距她/他的方法使用overflow:hidden来确保文本不会 go 低于任何一个浮动元素。 这样做的好处是不需要将两个浮点数的宽度硬编码为边距。 将此方法添加到我的工具箱中。

http://jsfiddle.net/HggL2/2/

上面的小提琴向您展示了我将如何做到这一点。 向左浮动.avatar和向右浮动.actions 。 给.text左右边距等于.avatar和.actions的宽度（这将防止.text内部的文本低于其中任何一个）。 一切的顺序很重要，这样.actions就不会出现在 IE7 的新行上。

Answer 3

或者您可以只使用Flex Box （纯 CSS）并编写更少的代码。