2010-06-28 1 views
1

J'ai le code HTML suivant:Comment faire un div aussi large que son frère mais pas plus large?

<div class="wrapper"> 
    <div class="label"> 
    foor bar baz 
    </div> 
    <img src="..."> 
</div> 

Oui, je sais que div avec "label" de classe doit être une étiquette. La question simple est: comment puis-je m'assurer que l'étiquette est toujours aussi large que l'image et jamais plus large? La largeur de l'image et le contenu de l'étiquette sont inconnus. Lorsque le contenu de l'étiquette est plus long que la largeur de l'image, il doit passer à la ligne suivante.

Pour l'instant, j'ai "display: inline-block" pour le wrapper et tout a l'air bien quand le texte tient dans l'étiquette. Lorsque le texte est plus long, il ne se casse pas, mais rend l'étiquette plus longue que l'image. Je suppose qu'il existe une solution simple pour cela, mais je ne la vois pas. Toute aide appréciée!

+1

Il ne doit s'agir que d'un élément d'étiquette s'il étiquette un contrôle de formulaire. – Joey

+0

Je pense que ce n'est pas une bonne réponse donc je le mets ici: je pense que toute largeur en unité de pourcentage hérite de la largeur div père, donc si vous mettez la largeur de l'étiquette 100%, elle sera aussi large que la div div. Cela a cependant des problèmes, alors utilisez 99%. –

+0

@Oscar Cela ne fonctionnerait que si le div div (wrapper) avait une largeur spécifiée. Si ce n'est pas le cas et que j'ai défini la largeur de l'étiquette div à 100%, elle reste de la même taille que si je n'avais pas défini la largeur du tout. (Réglage de la largeur à 90%, il est 10% plus petit, etc.) –

Répondre

2

un élément ne peut pas être plus grand que son parent, donc si vous mettez le tag img à l'intérieur du div il ne sera jamais plus grand.

<div class="wrapper"> 
    <div class="label"> 
    foor bar baz 
    <img src="..."> 
    </div> 
</div> 
+0

Oui, bien sûr, c'est correct. Je vais botter le label div complètement et garder tout dans l'emballage. Merci! –

1

Attribuez un attribut width:50%; (ou largeur: 49% ;, pour être sûr) aux deux éléments, cela devrait faire l'affaire.

+0

Je ne comprends pas vraiment. Quels sont les deux éléments que vous voulez dire? Comme je l'ai dit, la largeur de l'image est inconnue et je ne veux pas la changer. –

+0

Je pense que l'OP suppose que vous voulez diviser le div de niveau supérieur en sections droites et droites, plutôt qu'en haut et en bas. – ijw

+2

(Et voir «49% d'être plus sûr» me donne envie de blesser les gens qui ont écrit IE et vissé avec l'esprit d'une génération de webdesigners.) – ijw

Questions connexes