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

13
css css3 html html5 responsive-design

5 ответов

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

Скрипка

редактировать

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

обновленный скрипку

6

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

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

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

8

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

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

Если вы хотите, чтобы он был отзывчивым, дайте 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