CSS Largeur automatique de l'enfant 'div' dans Parent 'div'

Question

J'ai plusieurs enfants div pour "élément" dans un div parent appelé "panneau".

Quelle est la manière la plus simple d'avoir les divs "item" pour avoir des largeurs égales et, côte à côte, prendre la totalité du div "panel"?

Je les ai mis en place maintenant avec une largeur statique pour un nombre connu d'éléments. Mais vouloir être en mesure d'ajouter des éléments et l'avoir auto-taille.

Answer 1

Il n'y a pas de façon magique de le faire. Ce que vous pouvez probablement faire, c'est d'utiliser côté serveur pour calculer le nombre d'éléments divisés et, en fonction de cela, leur donner des largeurs.

Vous pouvez également écrire un script côté client avec JS pour les rendre tous égaux. Nous utilisons des étiquettes personnalisées pour construire certains éléments.

Answer 2

Vous pouvez utiliser java ou javascript pour obtenir le nombre de divs d'éléments, avec une boucle et utiliser getElementsByTagName et assign (width/# of items).

Answer 3

La façon la plus simple est malheureusement pas compatible cross-browser:

HTML:

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

CSS

.parent 
{ 
    display: table-row; 
    width: 800px; 
} 

.child 
{ 
    display: table-cell; 
}