2 div в строке, ширина справа = содержание, слева жидкости

У меня есть 2 горизонтальных встроенных блока div. Родительский div заполняет 100% ширину:

  • Ширина правого div должна быть равна ширине внутреннего элемента. Поэтому, если внутренний элемент является текстом, ширина правого элемента div должна быть равна самой длинной строке в нем. Также было бы здорово, если бы он не мог превысить напр. 300 пикселей.
  • Левый div должен сглаживать оставшуюся (оставшуюся) ширину, независимо от того, что он содержит. У меня есть вертикальная прокрутка в левом div, поэтому она должна оставаться на правом краю левого div, а внутренний элемент правого div должен начинаться сразу после него. Есть ли способ заархивировать это только с помощью css? Может быть, мне следует использовать таблицу вместо div?

Посмотрите скетч

<style>
    .wrapper {
        height: 100%;
        width: 100%;
    }
    .chat-wrapper {
        display: inline-block;
        height: calc(100% - 25px);
        width: 100%;
    }
    #chatbox {
        height: 100%;
        overflow-y: scroll;
        float: left;
        word-wrap: break-word;
    }
</style>
<div class="wrapper">
    <div class="chat-wrapper">
        <div id="chatbox">
            This div should fluid<br> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
        </div>
        <div> First row<br> Second row<br>This raw is longest = right div width<br><br> But less than 200px</div>
    </div>
</div>

html css word-wrap
person deathangel908    schedule 29.12.2014    source источник
comment
в чем проблема ?   -  person Yehia Awad    schedule 30.12.2014
comment
Я не могу установить ширину левого div. Потому что он равен calc(100% - правая ширина div). В скетче ширина левого div = ширина внутреннего элемента, а правый div заполняет оставшееся пространство, я хочу наоборот   -  person deathangel908    schedule 30.12.2014
comment
А как насчет флексбоксов? css-tricks.com/snippets/css/a-guide-to -флексбокс   -  person biziclop    schedule 30.12.2014

Ответы (2)


arrow_upward
1
arrow_downward

По сути, вы захотите разместить div с фиксированной шириной. В вашем случае измените порядок текстовых элементов и float:right первый текстовый div и установите max-width, чтобы ограничить размер. См. здесь.

person Don Bottstein    schedule 29.12.2014
comment
Спасибо! Я просто должен был перевернуть порядок div, чтобы правый div не оказался под левым. Я не ожидал, что объекты будут располагаться справа с float:right. - person deathangel908; 30.12.2014

arrow_upward
1
arrow_downward

только CSS

Если вы не можете редактировать HTML, вы можете добиться этого, только редактируя CSS.

Отображать элементы в виде таблицы и таблицы-ячейки: http://jsfiddle.net/usgzhv6k/

.chat-wrapper {         
    display: table;
}
.chat-wrapper > div:nth-child(2) {
    display: table-cell;
    background-color: red;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chatbox {
    width: 100%;
    background-color: green;
    overflow-y: scroll;
    word-wrap: break-word;
}
.create-message-wrapper {
    background-color: cyan;
    width: 100%;
    display: table-row;
}
person Daugilas Kakaras    schedule 29.12.2014