2013-03-16 6 views
0

Existe-t-il une règle css pour que le parent <div> conserve sa taille (en fonction des éléments) après la mise à l'échelle de la fenêtre? Pour le rendre plus clair, voici un exemple:CSS - Maintien de la largeur des éléments

<div style="width: 100%; height: 100%;"> 
    <div style="width: 30px; height: 30px;"> 
     text1 
    </div> 
    <div style="width: 60px; height: 30px;"> 
     text2 
    </div> 
    <div style="width: 30px; height: 30px;"> 
     text3 
    </div> 
</div> 

Ce code devrait afficher une div avec 3 petits div est à l'intérieur. Maintenant, lorsque vous redimensionnez la fenêtre, les enfants individuels seront "cassés" en nouvelles lignes.

Comment est-ce que je pourrais empêcher ce comportement? Utilisation d'un min-width ne fonctionnera pas, parce que je veux avoir la largeur dynamique, l'ajout et la suppression des enfants devraient être possibles. La seule option qui me vient à l'esprit est de compter les enfants via javascript, puis de définir l'attribut min-width via javascript. Mais cela devrait être possible de gérer avec CSS, je pense.

+0

Alors vous voulez que ces divs de rester côte à côte? –

+0

Oui, ne pas les emballer pour séparer les lignes. 'white-space: nowrap;' a résolu ce problème. – michaeln

Répondre

0

Ajouter:

white-space: nowrap; 

à la div parent. Je pense que cela les maintiendra sur la même ligne. Dans l'exemple fourni, vous avez également besoin de:

display: inline; 

sur les divs enfants.

http://jsfiddle.net/9dzBy/

+0

Merci, j'ai cherché quelque chose comme ça pendant environ une heure et je n'ai rien trouvé. Travaillé! – michaeln

Questions connexes