3 DIVs рядом друг с другом со средним заполнением пустоты

Question

Здравствуйте, я хотел бы спросить вас, как поставить 3 DIV рядом друг с другом, в то время как средний заполняет пустоту между первым и третьим DIV.

Я хотел бы иметь динамические кнопки в первом третьем третьем DIV, и мне нужен средний DIV, чтобы заполнить пространство между DIV одним и тремя.

Я brefer чистый CSS/HTML (без JavaScript)

Вот моя попытка:

http://jsfiddle.net/4smx3627/

#wrapper{ 
height: 30px; 
} 

#first{ 
    height: 100%; 
    background-color:red; 
    float: left; 
    display: inline-block; 
} 

#second{ 
    height: 100%; 
    background-color:green; 
    display: inline-block; 
} 

#third{ 
    height: 100%; 
    background-color:yellow; 
    float: right; 
    display: inline-block; 
} 

Большое спасибо за любые советы.

Answer 1

Существует много способов достичь этого. Современный способ, который наиболее точно отражает ваше описание, - «Flexbox», однако вам может потребоваться осторожность в поддержке браузера. Если вас интересуют только последние версии браузеров, это хороший вариант. Вот пример

jsfiddle http://jsfiddle.net/sxx65mhq/

HTML

<div class="container"> 
    <div>first</div> 
    <div class="middle">second</div> 
    <div>third</div> 
</div> 

И CSS

.container { 
    display: flex; 
} 

.middle { 
    flex-grow: 1; 
} 

Для поддержки браузера см http://caniuse.com/#feat=flexbox

Answer 2

Вам нужно поплавать влево и вправо. Но обратите внимание на порядок в HTML. Поплавки сначала являются средним div.

JS Bin Here

body{ 
    margin:0 auto; 
} 
div{ 
margin:0 auto; 
    border:0px solid; 
height:200px; 
    display:block; 
} 
#one { 
    width:20%; 
    float:left; 
} 

#two { 
    width:60%; 


} 

#three { 
    width:20%; 
    float:right; 
} 

Edit: измененные границы с цветом фона для облегчения просмотра дивы.