CSS: éléments sans largeur explicite imbriqué et retour à la ligne

Question

Je suis en train de placer une légende ci-dessous une image sans connaissance explicite de la largeur des images. Je souhaite la légende pour augmenter la largeur de l'image, mais pas pour étirer les éléments parents de l'espacer et envelopper les lignes à la place.

Je souhaite éviter d'utiliser javascript (lecture et l'application des largeurs des éléments) ou en utilisant max-width:. 123px que la gamme de largeurs possibles est grand

Le code ressemble actuellement quelque chose comme ça, mais peut être modifié librement. La largeur de l'image est inconnu, mais limité à une dimension maximale.

<div style="float:right; width:auto;">  
  <img src="http://" \>
  <div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
    My caption which can be longer then the image above and should wrap, I do not want to use max-width.
  </div>
</div>

Toutes les suggestions sont les bienvenus.

Answer 1

Tout d'abord, obtenir les styles de la html; ceux qui appartiennent à CSS.

, je pense que ce que vous pouvez faire est de définir la position de la div à « relative », mais laisser sa largeur à l'auto et son trop-plein de « caché ». Le paramètre caché devrait forcer à être assez grand pour tous ses éléments enfants.

La légende, vous ensuite réglé sur la position: auto, et en bas: 0, à gauche: 0, largeur:. 100%

Cela devrait accomplir ce que vous cherchez.

Answer 2

Vous pouvez définir la largeur de la légende div à certains% du parent.

Autrement dit, si le parent est (x) px large (en raison de l'image à l'intérieur de l'amenant à être que large), alors la largeur de la zone de sous-titres peut être réglée dans une certaine%. (Largeur: 100%, peut-être)