CSS заполнить оставшееся пространство ширины

Question

CSS заполнить оставшееся пространство ширины

У меня есть проблема с созданием CSS для заполнения оставшегося пространства ширины. Я пробовал так много других ответов в stackoverflow, и та же проблема возникает, div продолжает ломаться в новую строку. Вот мой код:

Http://jsfiddle.net/YSLJX/

Я пробовал их, но ничего не работает...

width: 100%

width: available

width: auto

591 1

css fill

1 ответ:

Comments

Ничего не найдено.

SW4 · Accepted Answer · 2014-05-06 13:14:19

Вы можете упростить свойhtml, переместить элемент изображения влево (u_img), затем применить overflow hidden ко второму элементу (u_msg), это "подскажет" ему применить поведение уровня блока и растянуть на оставшееся пространство.

Демо-Скрипка

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 структура