Limita il testo alla larghezza dell'immagine dei fratelli / larghezza automatica nei CSS

Question

Sto essenzialmente cercando di creare una versione della "figura" elemento (in arrivo in HTML5), per cui ho un'immagine con una breve descrizione sotto di essa.

Tuttavia, voglio limitare la larghezza di questo intero elemento a quella dell'immagine, quindi il testo non è più largo dell'immagine (avvolgendolo su più linee se necessario).

HTML di base:

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

Sono esperto di CSS ma non riesco a pensare a nessuna soluzione CSS pura, senza aggiungere un style = " width: 100px " al div per abbinare la larghezza dell'immagine.

Aggiorna : dopo un po 'di ricerca e riflessione, il metodo migliore sembra utilizzare una larghezza in linea sul div. Manterrò l'attributo width sull'immagine, nel caso in cui desidero che il div sia un po 'più ampio dell'immagine (ad esempio per accogliere una didascalia più lunga).

Questo approccio significa anche che potrei avere due immagini affiancate con una didascalia di seguito. Se ho un set di immagini della stessa dimensione, posso ovviamente aggiungere uno stile in più ad ogni div .

Grazie a tutti quelli che hanno risposto!

Answer 1

foglio di stile

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

nota: per abilitare il wrapping basta rimuovere l'ultima riga css

HTML

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

L'ho controllato su Chrome, Firefox e IE7 e sembra buono in tutti e tre. Mi rendo conto che questo ha la larghezza sul div e non sul img, ma almeno devi solo impostare la larghezza in un punto. A corto di usare espressioni css (solo IE) non riesco a vedere un modo per impostare la larghezza div esterna alla larghezza del primo elemento figlio.

Answer 2

Questo potrebbe essere realizzato anche usando 'display: table-caption' per la didascalia, come segue:

HTML

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

foglio di stile

.wrapper {
  display: table;
}

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

Questo blocco può anche essere spostato a sinistra di destra di altro testo. Ho provato questo in IE8 +. Ecco un esempio di JSBin: http://jsbin.com/xiyevovelixu/1

Answer 3

Per impostare la larghezza in modo che corrisponda automaticamente all'immagine, è possibile utilizzare

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

Questo fa sì che il div si comporti come una tabella (non supportato in Internet Explorer). Oppure potresti usare una tabella invece del div. Non penso che ci sia un altro modo di impostare automaticamente la larghezza.

Modifica : il modo più semplice è dimenticare la larghezza automatica e impostarla a mano. Se è davvero necessario, puoi utilizzare JavaScript o una tabella. In questo caso l'uso di una tabella non è così brutto perché stai affrontando una limitazione della versione HTML. Nel caso di scripting lato server, puoi anche impostare la larghezza durante la generazione della pagina.

Answer 4

Ho avuto lo stesso problema e dopo aver letto questo ha deciso utilizzare uno stile inline sull'elemento circostante. Mi sembra la soluzione migliore rispetto all'utilizzo di una tabella.

Answer 5

Puoi utilizzare la soluzione display: table per tutti gli altri browser e una Comportamento CSS per Internet Explorer.