Div填充父容器 [英] Div Fill Parent Container

问题描述

我有一个像我在下面嘲笑的评论。 .avatar & .actions 有一个静态宽度。 .comment 没有。我应该如何结构我的HTML& CSS使 .text 将占用所有可用空间 .comment 更改它的宽度？

I have a comment something like what I have mocked up below. .avatar & .actions have a static width. .comment does not. How should I structure my HTML & CSS so that .text will take up all of the available space as .comment changes it's width?

推荐答案

psuedo（未测试）代码

psuedo (untested) code

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

这篇关于Div填充父容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！