Zum Inhalt springen

Einzelne textpic-Blöcke untereinander und nicht floatend

Erstellt am 13. Januar 2009 · 5 Antworten · letzte Antwort am 14. Januar 2009

Tags: HTML & CSS, Frage

jumping-blueberry ·

Liebe Gemeinde,

ich hoffe, meine Frage ist nicht zu komplex, aber da ich noch nicht so wirklich den Überblick habe, kann ich einfach nicht einschätzen, wie schwer oder leicht eine Fragestellung ist.

Ich möchte folgendes erreichen:

|--------------------|
|xxxxxxxx| bla bla   |
|xxBildxx| bla bla bl|
|xxxxxxxx| a bla     |
|xxxxxxxx|           |
|--------|           |
|--------------------|

|--------------------|
|xxxxxxxx| bla bla   |
|xxBildxx| bla bla bl|
|xxxxxxxx| a bla     |
|xxxxxxxx|           |
|--------|           |
|--------------------|

Ich weiß, die Darstellung ist etwas eigenwillig.
Aber versteht Ihr, was ich meine?

Das Bild ("links im Text") ist Höher als der Text.
Nun sollte sich die Blockhöhe dem Bild anpassen und den Text des 2. Blocks nicht links neben dem ersten Bild weiterfließen.

Eigentlich lässt sich das nur mit CSS gar nicht realisieren (oder ich habe einen Blackout).
Gibts vielleicht eine TS-Methode die Höhe des Bildes irgendwie auf das umgebende Div zu übertragen??

Polygnom ·

ja geht mit css

oder teste mal das du am ende vom text ein paar

<p>& nbsp;</p>

setzt.
ohne das leerzeichen zwischen & und nbsp

Michaelh74 ·

Wichtig ist nur, dass Dein Image Float VOR dem 2. Content Element Text m. Bild wieder aufgehoben wird. Soweit ich mich entsinne, macht das T3 über einen eine CSS Klasse image-clearer. Sowas in der sollte drin sein.
Oder bei textpic einer overflow: hidden setzten.

Gruß
Michael

jumping-blueberry ·

"overflow:hidden" hat in dem Fall geholfen - Danke!

Auf anderen Seiten brauche ich es zwar anders, aber dafür schreibe ich mir schon eine Weiche.

Torsten.​E ·
<div class="Block">
   <div class="img">
      <img>Bild</img>
   </div>
   <div class="text">
      Das ist mein Text
   </div>
</div>
<div class="Block">
...
</div>
</HTML>

Torsten.E