Нужно 3 деления подряд с центральным делителем, заполняющим ширину страницы, независимо от длины контента

Question

Я пытаюсь создать html-интерфейс, где строки будут динамически добавляться на мою веб-страницу.

То, как я сейчас это делаю, - это использование вложенных DIV-файлов со стилем отображения CSS, установленным в таблицу.

В каждом ряду есть 3 деления. Левый div и правый div имеют фиксированную ширину, а средний div должен расширяться, чтобы соответствовать странице по горизонтали независимо от длины его содержимого.

Моя проблема в том, что я не уверен, как заставить этот центр div увеличить всю оставшуюся ширину страницы. С кодом ниже, центр div такой же маленький, как и содержимое.

Я попытался найти решение, в котором левое и левое делители попали в правое, а правое - правое, но это не позволило бы мне правильно выбрать строку текста. то есть, если бы я начал выбирать содержимое правого элемента div, а затем перетащил его влево, левый и центральный элементы div не были бы выбраны.

Решение должно быть нацелено только на движки, основанные на webkit, так как мой код будет использоваться только в среде, основанной на webkit.

EDIT!

Я забыл упомянуть, что я также пытался использовать таблицы. Однако мне также нужно избегать появления горизонтальных полос прокрутки на странице при уменьшении экрана. Когда я использую таблицы и сжимаю страницу, центральный элемент перестает сжиматься в определенной точке (думаю, из-за фиксированной ширины в процентах).

Мой код CSS:

.chatarea
{
    display: table;
    height = 100%;
    padding-top:50px;
    margin: 0px;
}

.row
{
    #display: table-row;
}

.nick
{
    display: table-cell;
    width: 140px;
    border-style: solid;
    text-align: right;
}

.timestamp
{
    display: table-cell;
    width 50px;
    border-style: solid;
}

.message
{
    display: table-cell;
    border-style: solid;
}

и соответствующий HTML

<div class="chatarea">
    <div class="row">
        <div class="nick">
            <p>Some Nick</p>
        </div>
        <div class="message">
            <p>Some Message</p>
        </div>
        <div class="timestamp">
            <p>Some Timestamp</p>
        </div>
    </div>
</div>

Answer 1

Я считаю, что это решение:

• Добавьте border-collapse: collapse; к .chartarea, чтобы удалить ширину двойной границы.
• Добавьте width: 100% к .chartarea, чтобы покрыть всеширина окна.
• Добавьте width: 80%; в .message, чтобы увеличить его при изменении ширины окна.
• Добавьте white-space: nowrap; в .nick для управления переносом.
• Добавьте white-space: nowrap; к отметке .time для управления переносом.
• Раскомментируйте display: table-row in .row

Проверьте эту скрипку . Примечание: кажется, что страница скрипта была удалена сервером.

Answer 2

Если вы не можете сделать это, подделайте это. Просто поместите ваши .nick и .timestamp внутрь .message и расположите их абсолютно.

.nick
{
    width: 140px;
    border-right-style: solid;
    text-align: right;
    height:100%; 
    position:absolute; 
    top:0; 
    left:0;
}

.timestamp
{
    width: 50px;
    border-left-style: solid;
    position:absolute; 
    top:0; 
    right:0; 
    height:100%;
}

.message
{
    border-style: solid;
    padding:0 50px 0 140px;
    overflow:hidden;
    position:relative;
}

Я проверял скрипку в последних версиях Chrome и Safari (на окнах), и у меня не было проблем с выделением текста.

Answer 3

Удалить стили display. Тогда просто используйте:

.nick {
    width: 50px;
    float: left;
}
.timestamp {
    width: 50px;
    float: right;
}

Тогда .message займет оставшуюся ширину.

Либо просто используйте элемент <table>.