span nicht breiter als div

[Gunnar Bittersmann]

@@bugge:

nuqneH

<div class="pic">
  <img src=""><br>
  <span>
    Bilderunterschrift
  </span>
</div>

Wie bekomme ich es hin, dass das Div so breit ist wie das Bild (Größe der Bilder variabel) und der Text in der Span automatisch umgebrochen wird, sodass er nicht Breiter wird als das Bild?

Browser haben die Eigenschaft, Tabellenzellen zu vergrößern, so dass ihr Inhalt angezeigt wird. Wenn also die Breite des 'div' auf 0 gesetzt wird und es eine Tabellenzelle ist, dann wird es so breit wie die Grafik. (Es sei denn, das längste Wort im Text ist noch breiter.)

IE < 8 kriegen das mit der Tabellenzelle nicht gebacken, da kann man aber mit JavaScript (als CSS-Expression) nachhelfen: Breite des Bildes auslesen und dem 'div' zuweisen.

div.pic  
{  
  display: table-cell;  
  width: 0;  
  width: expression( [code lang=javascript](new Function('elem', '[code lang=javascript]elem.style.width = elem.firstChild.width + "px";
~~~'))(this)[/code] );  
}[/code]  
  
Für IE ohne JavaScript sollte man vielleicht noch eine sinnvolle Breite setzen.  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a