Utwórz blok podziału wiersza w linii na 100% pozostałej szerokości

Question

Mam 3 bloki div wewnątrz innego div.

co chciałem zrobić, to umieścić je inline, ale pierwsze 2 div bloki powinny podjąć szerokość w zależności od ich zawartości i ostatni div wziąć pozostałą przestrzeń.

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

Staram się unikać stosowania stałych szerokości, ponieważ muszę użyć tego w responsywnym projekcie.

Jak zrobić niebieski div w this fiddle, aby uzyskać resztę dostępnego miejsca jego rodzica i reagować, jeśli ekran jest zmieniany?

Answer 1

wierzę, jeśli nie chcesz, aby określić w pikselach lub procentach szerokości na wszystkich i zrobić czerwone i zielone kontenery tylko tak szeroka, jak ich zawartość, należy je zawinąć do własnego pojemnika o nazwie .left poniżej:

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

Jeśli teraz po lewej stronie unoszą się znaki .left, a także po lewej stronie znajdują się znaki .left div, nie trzeba już określać żadnych elementów wbudowanego bloku. Niebieski pojemnik po prostu zajmie tyle miejsca, ile jest dostępne do końca .container.

.left { 
    float: left; 
} 

.left div { 
    float: left; 
} 

Fiddle

Edit

Silly me, pojemnik .left oczywiście nie jest potrzebna tak długo, jak tylko dodać float: left do czerwonych i zielonych bloków, tak jak powiedział @Ennui powyżej w komentarzach :)

Updated fiddle

Answer 2

Zmień css do tego:

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

Testowany w Chrome

EDIT

Silly me, to jest rozwidlony jsfiddle: http://jsfiddle.net/BWRVk/

Answer 3

Jeśli chcesz go reaguj, daj 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

Myślę, że to wszystko jest oparte na tym, co chcesz, aby Twoje obrazy, aby być. Po prostu użyłem% na obrazkach, aby pokazać, że można zmienić rozmiar zgodnie z elastycznym projektem. 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 czerwony i zielony i niebieski dostać width: clac(100% - 100px)

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

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