Question

我在制作CSS以填充剩余宽度空间时遇到问题。我在stackoverflow中尝试了很多其他的答案，同样的问题出现了，div继续闯入一个新的行。这是我的代码：

我试过这些但没有任何作用......

width: 100%
width: available
width: auto

Answer 1

您可以简化html，向左浮动图像元素（u_img），然后将隐藏的溢出应用于第二个元素（u_msg），这将告诉＆＃39 ;它应用块级行为并拉伸到剩余空间。

Demo Fiddle

HTML

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

CSS

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

另一种方法是应用 display:table structure

CSS填充剩余宽度空间

1 个答案:

Demo Fiddle