2 Bilder neben Text oben und unten ausrichten

[Josi]

Hallo!

Ich versuche gerade verweifelt verschachtelte DIVs zu bauen: rechts soll text sein und links davon zwei Bilder. Das obere soll sich am oberen Text-Rand ausrichten und das untere am unteren. Ich habe es erst mit Flexbox versucht und nun mit normalen Divs.

Bitte reißt mir nicht den Kopf ab für diesen Verschachtelten Code, ich finde ihn selbst doof!
https://jsfiddle.net/josfin/jg3mom7k/4/

Ich habe nun das Problem, dass sich das Linke Div irgendwie an die margin & paddings des rechten anpasst... Dadurch wird das Linke Div zu lang und fängt nicht dort an, wo der Text anfängt. Wenn man

<h2>Text</h2>
<hr>

rausnimmt, dann passt es.

Kann mir jemand helfen? Vielleicht nochmal komplett neu aufbauen...

 

[Josi]

Puh!!!
Danke!!!
mit space-between; hatte ich vorher auch gearbeitet, allerdings nur mit "align-items: space-between;".

Habe das Prinzip wohl noch nicht ganz verstanden! :-(

Danke @Sempervivum für diesen sauberen Code!!

 

[Josi]

Habe jetzt noch ein Problem.

Ich möchte das zweite Bild mobil bzw bei kleinem Bildschrim ausblenden und unter dem Text erscheinen lassen.

Dafür setze ich in den media queries:

.img-responsive2
{
  display: none;
 
}

und

#wrapper {
  flex-direction: column;
}

( Lege dann ein neues DIV unter dem Text an, welches nur bei kleinem Bildschirm eingeblendet wird.)

Das funktioniert in Firefox, aber in Safari liegt dann das Bild unter dem Text:

https://jsfiddle.net/josfin/cd5b2vqg/

Edit: es scheint an flex-basis: 50%; zu liegen. Mit flex-basis: auto; setze ich alle IDs auf den Standard Wert.

 

[Josi]

Danke, das Problem hatte ich auch, aber hatte es irgendwie anders gelöst. Ich kann nicht schauen, wie es im IE aussieht. Werde min-height auch ergänzen.

Ja, das Problem ist gelöst, vielen Dank! Sorry, irgendwie funktioniert die Benachrichtigung per Mail nicht...

Kann ich eigentlich auch selbst Themen als gelöst markieren?

 

[MrMurphy]

Hallo

Meinst du so:

http://boratb.bplaced.net/index67.html

Gruss

MrMurphy