Fare un div inline-block prendere il 100% della larghezza rimanente

Question

Ho 3 blocchi div all'interno di un altro div.

Quello che volevo fare è metterli in linea, ma i primi 2 blocchi div dovrebbero prendere una larghezza in base al loro contenuto e l'ultimo div occupare lo spazio rimanente.

Io cerco di evitare l'uso di larghezze fisse perché ho bisogno di usarlo in un design reattivo.

Come posso rendere il blu div in this fiddle prendere il resto dello spazio disponibile del relativo genitore e agire in modo reattivo se lo schermo viene ridimensionato?

Answer 1

Credo che se non si desidera specificare qualsiasi larghezza in pixel o percentuali a tutti e rendere i contenitori rossi e verdi solo larga quanto la loro contenuto, sarà necessario avvolgerli all'interno del proprio contenitore, denominato .left qui sotto:

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

Se ora si impostaa sinistra e anche a virgola mobile .left div a sinistra, ora non è più necessario specificare alcun elemento di blocco in linea. Il contenitore blu occuperà lo spazio disponibile fino alla fine dello .container.

.left { 
    float: left; 
} 

.left div { 
    float: left; 
} 

Fiddle

Modifica

sciocco me, il contenitore .left è, ovviamente, non aveva bisogno di tutto il tempo che basta aggiungere float: left per i blocchi rossi e verdi, proprio come ha detto @Ennui sopra nei commenti :)

Updated fiddle

Answer 2

Cambia la tua css a questo:

.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;} 

testato in Chrome

EDIT

sciocco me, questo è il jsfiddle biforcuta: http://jsfiddle.net/BWRVk/

Answer 3

Se si vuole che essere reattivo, dare il 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%;} 

Answer 4

Credo che sia tutto basato su ciò che si desidera che le immagini siano. Ho appena usato% sulle immagini per mostrare che possono essere ridimensionate in base al design reattivo. 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%;} 

Answer 5

float: left il rosso e il verde e l'azzurro ottenere width: clac(100% - 100px)

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

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