Ein Element vom umfließen ausschließen

[Mr. Brooks]

Hallo,

ist es möglich ein Element vom umfließen eines anderes - weiter "oben" liegenden - Elementes auszuschließen, das Element selbst aber umfließen zu lassen?

Bsp:

<figure style="float:right;width: 50%; margin: 0.5em 0em 0em 0.5em;">
<img src="image1.jpg" alt=""/><figcaption>
<p>text</p></figcaption></figure>

<figure style="float:right;width: 30%; margin: 0.5em 0em 0em 0.5em;">
<img src="image2.jpg" alt=""/><figcaption>
<p>text</p></figcaption></figure>

<p>längerer text</p>

Normal würde hier Image2 Image1 umfließen, das soll nicht passieren. Der Text ganz unten soll das aber schon und zwar beide. Es würde sich quasi ein abgestuftes umfließen beider Bilder ergeben.

 

[M-7MkF7-D]

Daran, dass mir das figure-Element nicht bekannt, merke ich mal wieder, wie lange die Beschäftigung mit HTML schon her ist.

Aber würde es nicht grundsätztlich so gehen, dass du beide figure-Elemente in einem Container schachtelst und diesen umfliessen lässt?

So in etwa:

<div style="float:right">
<figure id="1" width: 50%; margin: 0.5em 0em 0em 0.5em;">
</figure>
<figure id="2" width: 50%; margin: 0.5em 0em 0em 0.5em;">
</figure>
</div>
<p>längerer text</p>


PS: Da beide figure-Elemente die gleichen Style-Attribute verwenden, bietet sich hier die Verwendung von Klassen und evtl. die Auslagerung in eine CSS-Datei an.

 

[M-7MkF7-D]

Ich habe mir das heute nochmal durchgelesen... das mit der Stufe und den unterschiedlichen Breiten war mir auf die Schnelle entgangen.

Probiere mal Folgendes:

<figure style="float:right; width: 50%; margin: 0.5em 0em 0em 0.5em; ">
<img src="image1.jpg" alt=""/>
<figcaption>
<p>text 1</p>
</figcaption>
</figure>

<figure style="float:right; clear:right; width: 30%; margin: 0.5em 0em 0em 0.5em;>
<img src="image2.jpg" alt=""/>
<figcaption>
<p>text 2</p>
</figcaption>
</figure>

<p>längerer text</p>

 

[Mr. Brooks]

So geht es, Danke.