Bilder mit Unterschrift inline darstellen

[waflija]

Hi,

Ziel der Aktion ist folgendes:

B = Bild C = Unterschrift, | = Border M = Menu

M B B B B B B
M C C C C C C
M
M B B B B
M C C C C
M
  weiterer
  Content

B,C befinden sich jeweils in einem DIV Container mit "float:left" Eine Reihe ist wiederum ein Container "Zeile"

Problem: Der Umbruch nach der ersten Reihe. Selbst wenn ich float:left bein letzten entferne, entsteht folgendes.

M B B B B B  |
M C C C C C  |
M            |
M         B B|B B B
M          C C|C C C

Benutze ich clearfix oder ein platzhalter div mit "clear:both" rutscht die zweite Zeile ganz nach unten, unter das Menü.

Deshalb war meine letzte Idee, die Bilder und Beschriftung ohne eigene DIV-Container einzubauen, da dann der Zeilenumbruch kein Problem ist. Nur rutscht dann immer die Bildbeschriftung neben das Bild...

Hallo,

Ich habe einen Text, in dem ich ein Bild mit Unterschrift darstellen will. Dies soll im Text dargestellt werden. (Keine feste Position, wie ein einzelnes <img> element)
Mein Ansatz: Beides in einem div bündeln.

bis hierhin okay.

<div style="display:inline;">
  <img src="meinbild.jpg">
  <br>
  <span>meine Bildunterschrift</span>
</div>

So wirkt der Inhalt des div-Elements, als ob das div gar nicht da wäre. Es verhält sich neutral.

Das Problem ist jedoch, dass dieses Element trotzdem einen Zeilenumbruch erzeugt.

Nicht das div-Element, sondern das darin enthaltene br.

Kann man dagegen etwas tun?

Ja: Formatiere das div-Element als inline-block. Dann fließt es als Ganzes mit dem Text, bildet aber mit seinem eigenen Inhalt einen festen Block.

Wenn nein, was könnte ich alternativ machen um die Unterschrift immer unter dem Bild darzustellen?

Ich finde es seltsam, ein Bild mitsamt Bildunterschrift im Textfluss mitlaufen zu lassen, und kann mir im Moment keine Anwendung vorstellen, wo das sinnvoll erscheint ...

Ciao,
Martin