Legen Sie die Breite der Kinder zum Füllen der Eltern

Question

Ich möchte die Kinder der div füllen Sie ihre Breite.

bin jetzt einen Code wie folgt aus:

.parent { 
 
    width: 100%; 
 
    display: inline-block; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

und es ist für 3 boxes arbeiten, aber was ich will, ist, dass - auch wenn die Kastenzählwert one oder two ist möchte ich sie um die Elternbreite zu füllen. Ich möchte dies nur mit CSS erreichen.

Answer 1

Sie können diese flexbox Eigenschaften mit Hilfe erreichen. Hier

ist eine Demo:

.parent { 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex: 1; 
 
    margin: 0 10px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

Verwendung Flexbox:

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin-bottom: 15px; 
 
} 
 

 
.child { 
 
    flex: 1; 
 
    margin: 0 10px; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

Sie können die Eltern machen eine flexbox und definieren für die Kinder zu wachsen, wenn Platz vorhanden ist. Ich entfernte die Breite für .child.

.parent { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex-grow: 1; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 4

Sie verwenden Breite wie 30%, die für jedes Element befestigt ist, so dass jedes Mal, wenn Sie ein anderes Element erstellen seine Größe festgelegt ist, und am Ende des Wohnens Elemente hinzugefügt und nach der Gesamt Die Breite ist größer als die des übergeordneten Containers, der überläuft.

Stattdessen Flex-Box verwenden.

.parent { 
 
    width: 100%; 
 
    display:flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    flex:1; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 

 
</div>

Answer 5

können Sie Flexbox dies zu erreichen, verwenden.

Die folgende Demo zeigt, wie es mit mehreren untergeordneten Knoten und auch mit Knoten ohne Höhe funktioniert.

Ich habe auch die Margin-Eigenschaft für die untergeordneten Elemente geändert, um mit Flexbox ordnungsgemäß zu funktionieren.

.parent { 
 
    width: 100%; 
 
    display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/ 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-flex; 
 
    flex-grow: 1; 
 
    margin: 0 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
} 
 

 
/*demontration for zero-height child elements*/ 
 
.child:nth-child(2) { 
 
    height: 0; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <!-- remove these to test with different child count ---> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 6

hier ist der Code unten, ich glaube, dies kann helfen, für Sie

\t .parent { 
 
    
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 

 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
    margin-left: 1%; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 7

Wenn sein für eine feste Anzahl von Kind dann können Sie berechne immer die Breite von Kind nach (Eltern-Breite/Nr.des Kindes) und fixiere diese Breite für das Kind. Aber wenn Ihr Code dynamisch untergeordnet ist, können Sie die Flex-Eigenschaft der Anzeige verwenden. Fügen Sie einfach display:flex zu Ihrem .parent und flex:1 zu Ihrem .child hinzu.

Allerdings hat dies einige Probleme mit der Browserkompatibilität und ist nicht ratsam, wenn Sie auf alte Browser zielen. Es gibt auch nur wenige Fälle von Elementen, die keine Biegeeigenschaft unterstützen. Siehe hierzu link für Informationen. Ich würde vorschlagen, schreiben Sie einen Javascript-Code für die Berechnung der Breite des Kindes und fügen Sie die Eigenschaft hinzu. Es ist gut, um mit Flex zu gehen! Hoffe das hat dir geholfen! Sie können mehr über flexbox here studieren.