Machen Sie Child divs erweitern, um Eltern divs Breite zu füllen

Question

So habe ich drei divs in einem div.

Ich möchte, dass die untergeordneten divs die Breite des übergeordneten Elements ausfüllen (die kombinierte Breite der untergeordneten Elemente sollte das übergeordnete Element sein). Das passiert jedoch nicht, ich komme zu kurz. Ich denke, das liegt daran, dass die Child-Divs die Breite basierend auf ihrem Inhalt einstellen.

Wie erreiche ich, was ich will?

CSS-

.child { 
    background: white; 
    color: #a7a9ac; 
    cursor: pointer; 
    font-size: 15px; 
    border-right: 1px; 
    border-top: 0; 
    border-bottom: 0; 
    border-left: 0; 
    border-style: solid; 
    border-color: @faded-grey; 
    padding-right: 10px; 
    margin: 0 auto; 
    height: 100%; 
} 

.parent { 
    border-top: 1px; 
    border-left: 0; 
    border-bottom: 1; 
    border-style: solid; 
    border-color: @faded-grey; 
    border-right: 0; 
    width: 100%; 
    margin-right: 0px; 
    height: 80px; 

} 

Answer 1

Wenn Sie wissen, dass es immer drei Kinder sein wird, können Sie einfach:

.parent > .child { 
    float: left; 
    width: 33%; 
} 

.parent { 
    overflow: auto; /*or whatever float wrapping technique you want to use*/ 
} 

Wenn Sie nicht wissen, wie viele Kinder da sind, müssen Sie benutze CSS-Tabellen, flexbox oder kombiniere Inline-Blöcke mit text-align: justify.

Answer 2

Sie können diese drei Eigenschaften in die .child CSS-Regel hinzufügen:

width:33%; 
float:left;  
box-sizing: border-box; 

Die letzte Zeile es sicher macht, wird auch funktionieren, wenn Sie Grenzen hinzufügen, Polsterung und Marge auf die Boxen.

ONLINE DEMO

Ps: nicht direkt, sondern es ist auch ein Fehler in der Grenz Unterseite für Eltern, oben in Geige korrigiert. Wenn Sie nicht den Wert 0 verwenden müssen Sie Einheit angeben:

border-bottom:1px; 

Answer 3

ich brauchte für meine Lösung eine Varianz in der Anzahl der Elemente zur Aufnahme für sie vollständig reagieren zu.

Ich entdeckte eine interessante Lösung dafür. Es zeigt im Wesentlichen wie eine Tabelle. Jedes Element Aktien zur Verfügung stehende Breite, und das funktioniert auch für Bilder sehr gut: http://jsfiddle.net/8Qa72/6/

.table { 
    display: table; 
    width: 400px; 
} 

.table .row { 
    display: table-row; 
} 

.table .row .cell { 
    display: table-cell; 
    padding: 5px; 
} 

.table .row .cell .contents { 
    background: #444; 
    width: 100%; 
    height: 75px; 
}