it-roy-ru.com

Заставить div inline-block занять 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 в эту скрипку взять оставшееся свободное пространство своего родителя и действовать отзывчиво, если размер экрана изменяется?

14
Diego

Я считаю, что если вы не хотите вообще указывать ширину в пикселях или процентах и ​​делать красные и зеленые контейнеры настолько же широкими, как их содержимое, вам нужно будет обернуть их внутри собственного контейнера с именем .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 влево, а также перемещаете .left div влево, вам больше не нужно указывать какие-либо элементы inline-block. Синий контейнер просто займет столько места, сколько у него есть, до конца .container.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Правка

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

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

6
Elise

float: left красный и зеленый и синий получить width: clac(100% - 100px)

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

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

8
URL87

Измените свой 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/

2
Agustin Meriles

Если вы хотите, чтобы он был отзывчивым, укажите 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%;}
1
feitla

Я предполагаю, что все это основано на том, что вы хотите, чтобы ваши изображения. Я просто использовал% на изображениях, чтобы показать, что они могут быть изменены в соответствии с адаптивным дизайном. 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%;}
1
Keith