Wie mache ich mehrere divs horizontal mit gleicher Breite anordnen?

Question

Ich möchte zwei, drei oder mehr divs horizontal angeordnet, dann füllt jede Breite den gesamten verfügbaren Platz. Zum Beispiel nehmen sie bei zwei Divs jeweils die Hälfte des Raums ein, bei drei Divs nehmen sie 1/3 des Raums ein und so weiter.

Ich habe versucht, Display-Inline-Block, und können die divs nebeneinander angeordnet werden, aber wie Sie die verfügbaren Breite des übergeordneten Container füllen?

EDIT: Vorzugsweise ohne Display flex-Methode (Ich bin mir nicht sicher, ob seine kompatibel mit IE11 voll)

.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

Sie können display: table im Container und display: table-cell auf Schaltflächen verwenden.

.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

Dies ist trivial mit flexbox Layout:

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

Alles, was ich tat, war die display:flex und flex:1 Eigenschaften zu container und button jeweils hinzufügen.

Flexbox is very widely supported nowadays, aber Sie können es vermeiden, wenn Sie sich für IE (bis einschließlich Version 11) oder älteres Android interessieren. Leider ohne flexbox, was Sie tun möchten, ist viel schwieriger. Ich werde jemand anderen eine Nicht-Flexbox-Antwort schreiben lassen.