html - Div 填充父容器

Question

我有一条评论类似于我在下面模拟的内容。 .avatar 和 .actions 具有静态宽度。 .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;}

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>