Div填充父容器

Question

我的评论类似于我在下面嘲笑的内容。 .avatar＆amp; .actions具有静态宽度。 .comment没有。我应该如何构建我的HTML＆amp; CSS以便.text占用所有可用空间，.comment会改变它的宽度？

Answer 1

psuedo（未经测试）代码

<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;}

Working Example:

.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来确保文本不会低于任何浮动元素。这样做的优点是不需要将两个浮点的宽度硬编码为边距。将此方法添加到我的工具箱中。

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

上面的小提琴告诉你我将如何做到这一点。向左浮动.avatar，向右浮动.actions。将.text左右边距设为等于.avatar和.actions的宽度（这样可以防止.text内的文字位于其中任何一个下方）。所有内容的顺序都很重要，因此{1}}不会出现在IE7的新行中。

Answer 3

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