Rozdzielnice dla dzieci rozwiń, aby wypełnić szerokość div jednostki nadrzędnej.

Question

Tak więc mam trzy elementy div wewnątrz jednego elementu div.

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

chcę DIV dziecko do wypełnienia szerokości rodzica (łączna szerokość dzieci powinna być dominująca). Jednak tak się nie dzieje, brakuje mi czasu. Myślę, że dzieje się tak dlatego, że divy podrzędne określają szerokość na podstawie ich zawartości.

Jak osiągnąć to, czego chcę?

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

Jeśli wiesz, że zawsze będzie troje dzieci, można po prostu użyć:

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

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

Jeśli nie wiesz, ile dzieci tam są, trzeba będzie używaj tabel CSS, flexbox, lub może łączyć inline-bloki z text-align: justify.

Answer 2

Możesz dodać te trzy właściwości do reguły .child CSS:

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

Ostatnia linia sprawia, że ​​na pewno będzie to również pracować podczas dodawania granic, padding i margines na polach.

ONLINE DEMO

Ps: nie bezpośrednio związane, ale jest też błąd w border-bottom dla rodzica, skorygowanej w skrzypcach powyżej. Gdy używasz non-0 wartość należy określić jednostki:

border-bottom:1px; 

Answer 3

mi potrzebne do mojego rozwiązania, aby pomieścić wariancję liczby elementów, aby były całkowicie elastyczne.

Odkryłem interesujące rozwiązanie tego problemu. Zasadniczo wyświetla się jak stół. Każda akcja Element dostępne szerokości i to działa również dla obrazów bardzo dobrze: 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; 
}