Limiter le texte à la largeur de l'image suivante / largeur automatique en CSS

Question

J'essaie essentiellement de créer une version de la "figure". élément (à venir en HTML5), grâce à quoi j'ai une image avec une courte description en dessous.

Cependant, je souhaite limiter la largeur de cet élément entier à celle de l'image, afin que le texte ne soit pas plus large que l'image (le cas échéant, il est agrandi à plusieurs lignes).

HTML de base:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Je connais bien les CSS, mais je ne peux penser à aucune solution CSS pure sans ajouter un style = " width: 100px & au div pour correspondre à la largeur de l'image.

Mise à jour : après quelques recherches et réflexions, la meilleure méthode semble consister à utiliser une largeur en ligne sur la div. Je conserverai l'attribut width sur l'image, au cas où je souhaiterais que la div soit un peu plus large que l'image (par exemple pour une légende plus longue).

Cette approche signifie également que je pourrais avoir deux images côte à côte avec une légende ci-dessous. Si j'ai un ensemble d'images de la même taille, je peux bien sûr ajouter un style supplémentaire à chaque div .

Merci à tous ceux qui ont répondu!

Answer 1

Feuille de style

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

note: pour activer le wrapping, supprimez simplement la dernière ligne css

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Je l’ai vérifiée dans Chrome, Firefox et IE7, et l’apparence est satisfaisante dans les trois cas. Je me rends compte que cela a la largeur sur le div et non le img, mais au moins vous devez seulement régler la largeur à un endroit. Sans utiliser les expressions css (IE uniquement), je ne vois pas comment mettre la largeur des div externes à la même largeur que celle du premier élément enfant.

Answer 2

Ceci pourrait également être accompli en utilisant 'display: table-caption' pour la légende, comme suit:

HTML

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Feuille de style

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

Ce bloc peut également être flotté à gauche de droite d'un autre texte. J'ai testé cela dans IE8 +. Voici un exemple JSBin: http://jsbin.com/xiyevovelixu/1

Answer 3

Pour que la largeur corresponde automatiquement à l'image, vous pouvez utiliser

.

.figure {
  display: table;
  width: 1px;
}

Cela fait que la div se comporte comme une table (non supporté par Internet Explorer). Ou vous pouvez utiliser une table au lieu de la div. Je ne pense pas qu'il existe un autre moyen de régler la largeur automatiquement.

Modifier : le moyen le plus simple consiste à oublier la largeur automatique et à la définir à la main. Si cela est vraiment nécessaire, vous pouvez utiliser JavaScript ou une table. Dans ce cas, l’utilisation d’une table n’est pas si moche, car vous vous attaquez à une limitation de la version HTML. Dans le cas d’un script côté serveur, vous pouvez également définir la largeur lors de la génération de la page.

Answer 4

J'ai eu le même problème et après avoir lu cela a été décidé. d'utiliser un style en ligne sur l'élément environnant. Cela semble être la meilleure solution que d’utiliser une table.

Answer 5

Vous pouvez utiliser la solution display: table pour tous les autres navigateurs et un Comportement CSS pour Internet Explorer.