Ebeveyn div genişliğini doldurmak için çocuk divs genişletin

Question

Yani bir div içinde üç div var.

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

Ben çocuk div'ler ebeveynin (çocukların kombine genişliği ebeveyn olmalıdır) genişliğini doldurmasını istiyorum. Ancak, bu gerçekleşmiyor, ben kısa düşüyorum. Bunun nedeni, çocuk divlarının içeriklerine göre genişlik ayarlamasıdır.

İstediğim şeyi nasıl alabilirim?

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

her zaman üç çocuk olacak biliyorsanız, basitçe kullanabilirsiniz:

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

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

sen kaç tane çocuk bilmiyorsanız, size gerekecektir CSS tablolarını, esnek kutuyu kullanın veya belki de metin satırlarıyla satır içi blokları birleştirin: yaslayın.

Answer 2

Sen .child CSS kuralına bu üç özelliklerini ekleyebilirsiniz: Son satır sen kutulara sınırlar, dolgu ve marjı eklerken aynı zamanda çalışacaktır emin olur

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

.

ONLINE DEMO

Ps: doğrudan ilişkili ancak yukarıda keman düzeltilmiştir ebeveyn için sınır-alt bir hata da var değil. Eğer sigara 0 değerini kullandığınızda birimini belirtmek gerekir: onları tamamen duyarlı olabilmesi için

border-bottom:1px; 

Answer 3

Ben elemanlarının sayısında bir varyansı karşılamak için benim çözüm için gerekli.

Bunun için ilginç bir çözüm buldum. Aslında bir masa gibi görüntüler. Her eleman mevcut hisse genişliği, ve bu da çok iyi görüntüler için çalışır: 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; 
}