CSS填充剩余的宽度空间

我有一个问题，使CSS来填补剩余的宽度空间。我在stackoverflow中尝试了很多其他的答案，同样的问题也出现了，div不断地进入一条新的线路。这是我的密码：

我试过了，但都没用

width: 100%
width: available
width: auto

---

您可以简化

html

，将图像元素向左浮动（

u\u img

），然后将溢出隐藏应用于第二个元素（

u\u msg

），这将“告诉”它应用块级行为并延伸到剩余空间

HTML

---

另一种选择是应用一个

你的问题不清楚，复杂。所以float:left根本不需要？对于溢出的元素不需要。

<div id="chat" style="height: 350px;">
    <div class="u_img">
        <img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg&quot;" />
    </div>
    <div class="u_msg"><span class="post_time">Tue May  6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
    </div>
</div>

#chat {
    width: 100%;
    height: 100%;
    overflow:hidden;
    border: 1px solid #c0c0c0
}
.msg {
    border: 1px solid #c0c0c0;
    min-height: -moz-fit-content;
    min-height: -webkit-fit-content;
    min-height: fit-content;
}
.u_img {
    float: left;
    max-height: 48px;
}
.u_msg {
    padding-left: 5px;
    font-family:'Ubuntu', sans-serif;
    word-wrap: break-word;
    overflow:hidden;
}
.u_name {
    float: left;
}
.post_time {
    float:right;
    right:0px;
    color:#c0c0c0;
    font-size:10px;
}