Сделать встроенный блок div займет 100% оставшейся ширины

У меня есть 3 div блока внутри другого div.

То, что я хотел сделать, это поместить их в строку, но первые 2 div блоки должны иметь ширину в соответствии с их содержимым, а последний div - оставшееся пространство.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

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

Как я могу сделать синий div в этой скрипке взять оставшееся свободное пространство своего родителя и действовать отзывчиво, если размер экрана изменяется

Ответы

Ответ 1

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

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

Если вы теперь плаваете .left влево, а также float .left div влево, вам больше не нужно указывать какие-либо элементы встроенного блока. Синий контейнер просто займет столько места, сколько доступно до конца .container.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Edit

Глупо мне, контейнер .left, очевидно, не нужен, пока вы просто добавляете float: left в свои красные и зеленые блоки, точно так же, как @Ennui сказал выше в комментариях:)

Обновлена скрипка

Ответ 2

float: left красный и зеленый, а синий - width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

Ответ 3

Измените свой css на это:

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}

.container div {height: 20px;}

.red{border: 2px solid red; display: block; float: left;}

.green{border: 2px solid green; display: block; float: left;}

.blue{border: 2px solid blue;}

Протестировано в Chrome

ИЗМЕНИТЬ

Глупо меня, это разветвленная jsfiddle: http://jsfiddle.net/BWRVk/

Ответ 4

Если вы хотите, чтобы он был отзывчивым, дайте divs% widths.

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;}

.red{border: 2px solid red;width:10%;display:inline;}

.green{border: 2px solid green;width:10%; display: inline;}

.blue{border: 2px solid blue;display:inline-block;width:80%;}

Ответ 5

Я думаю, все это основано на том, какими вы хотите, чтобы ваши изображения были. Я просто использовал% на изображениях, чтобы показать, что они могут быть изменены в соответствии с гибким дизайном. http://jsfiddle.net/6kLVn/7/

HTML

<div class="container">
    <div class="red">Red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}

.red{border: 2px solid red; width:31%; }

.green{border: 2px solid green;width:31%;}

.blue{border: 2px solid blue;width:31%;}