Как сделать несколько div, расположенных горизонтально с равной шириной?

Question

Я хочу, чтобы два, три или более divs располагались горизонтально, затем каждая ширина заполняла все доступное пространство. Например, с двумя div, они будут занимать половину пространства, а три divs занимают 1/3 пробела и т. Д.

Я попытался использовать встроенный блок отображения, и вы можете расположить divs рядом друг с другом, но как вы заставляете их заполнять доступную ширину родительского контейнера?

EDIT: Предпочтительно без способа отображения гибкого (я не уверен, если его совместим с IE11 полностью)

.container{ 
 
    border: solid 1px green; 
 
    height: 50px; 
 
    box-sizing: border-box; 
 

 

 
} 
 
.button{ 
 
    display:inline-block; 
 
    border: solid 1px black; 
 
    height: 20px; 
 
}

<div class="container"> 
 
<div class="button "> 
 
div1 
 
</div> 
 
<div class="button "> 
 
div2 
 
</div> 
 
<div class="button "> 
 
div3 
 
</div> 
 
</div>

Answer 1

В контейнере можно использовать display: table и display: table-cell на кнопках.

.container{ 
 
    border: solid 1px green; 
 
    height: 50px; 
 
    box-sizing: border-box; 
 
display: table; 
 
width: 100%; 
 

 
} 
 
.button{ 
 
    display: table-cell; 
 
    border: solid 1px black; 
 
    height: 20px; 
 
}

<div class="container"> 
 
<div class="button "> 
 
div1 
 
</div> 
 
<div class="button "> 
 
div2 
 
</div> 
 
<div class="button "> 
 
div3 
 
</div> 
 
</div>

Answer 2

Это тривиальное с flexbox макете:

.container{ 
 
    border: solid 1px green; 
 
    height: 50px; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
} 
 
.button{ 
 
    display:inline-block; 
 
    border: solid 1px black; 
 
    height: 20px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
<div class="button "> 
 
div1 
 
</div> 
 
<div class="button "> 
 
div2 
 
</div> 
 
<div class="button "> 
 
div3 
 
</div> 
 
</div>

Все, что я сделал, это добавить display:flex и flex:1 свойствам container и button соответственно.

Flexbox is very widely supported nowadays, но вы можете избежать этого, если вам нравится IE (вплоть до версии 11) или старше Android. К сожалению, без flexbox, то, что вы хотите сделать, намного сложнее. Я позволю кому-то написать ответ не-flexbox.