Создайте дочерние divs, чтобы заполнить ширину родительского div.

Question

Итак, у меня есть три div внутри одного div.

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

Я хочу, чтобы дочерние divs заполняли ширину родителя (общая длина дочерних элементов должна быть родительской). Однако этого не происходит, я не понимаю. Я думаю, это связано с тем, что дочерние divs устанавливают ширину на основе их содержимого.

Как достичь того, что я хочу?

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

Если вы знаете, что всегда будет трое детей, вы можете просто использовать:

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

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

Если вы не знаете, сколько детей есть, вам нужно использовать таблицы CSS, flexbox или, возможно, объединить встроенные блоки с text-align: justify.

Answer 2

Вы можете добавить эти три свойства к правилу .child CSS:

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

Последняя строка делает, что он также будет работать, когда вы добавляете границы, отступы и маржу в боксы.

ONLINE DEMO

Ps: не имеет прямое отношение, но есть также ошибка в приграничный день для родителей, скорректированного на скрипке выше. При использовании не-0 значения необходимо указать блок:

border-bottom:1px; 

Answer 3

мне нужно для решения, чтобы разместить дисперсию числа элементов для них, чтобы быть полностью отзывчивыми.

Я нашел интересное решение для этого. Он по существу отображается как таблица. Каждый элемент акции, доступные ширины, и это также работает для изображений очень хорошо: 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; 
}