Ausrichtung IMG in div Element

  • ich wende mich an euch da ich gerade nicht mehr weiter weiß und anscheinend ziemlich auf dem Schlauch stehe und daher Hilfe brauche..


    Folgendes Szenario:

    Im Body gibt es 2 Column, die jeweils mit Text gefüllt sind. Am Ende kommt jeweils ein Bild, welches ich gerne ausgerichtet haben möchte. Dann wieder jeweils Text, und wieder jeweils ein Bild. Rechts und Links funktioniert es wunderbar, nur leider sind sie in der Höhe nicht identisch. Habe mittlerweile gefühlt es mit display, float, div, margin, ect. probiert aber keine der Möglichkeiten hat funktioniert. Vielleicht übersehe ich auch einfach etwas?


    Mit Besten Grüßen

  • Die Roten Überschriften sind die ersten Bilder, also aus

    <img class="img_reiter" src="img/unserOel_450x120.jpg">


    Ist als Image eingebaut wegen der Schriftart.


    Das Bild im <div> ist dann das "richtige" Bild, also welches sich nicht ausrichten lässt.


    PS: Der Screenshot stammt auch aus dem mittleren Bereich einfach. Also es ist immer das Image (Rote Überschrift), Text, richtiges Image, und wieder von vorne..

  • Meine Lösung:

    Zunächst hatte ich versucht, zwei Spalten zu verwenden, so wie moon7331, weil die Elemente darin ja offenbar semantisch zusammen gehören, aber dann konnte ich die Höhen zwischen links und rechts nicht angleichen.

    Mal sehen, wie MrMurphy es macht.


    Edit: Nachdem ich noch Mal drüber geschaut habe, scheint mein Eindruck, dass die Inhalte der Spalten semantisch zusammen gehören, doch nicht zuzutreffen?

  • Sempervivum , da ich noch nicht zu Hause bin um es auszuprobieren :)



    Habs nun gerade mal probiert, scheint auf den ersten Blick mein Problem behoben zu haben, dafür schon mal vielen Dank!


    Magst du mir vielleicht noch sagen wie genau das nun Zustande gekommen ist?


    Beste Grüße


    PS: Wenn ich es richtig verstehe hast du die "Spaltenzusammenfassung" waagerecht gemacht anstatt so wie es bei mir vorher war senkrecht, oder?

  • Zitat

    PS: Wenn ich es richtig verstehe hast du die "Spaltenzusammenfassung" waagerecht gemacht anstatt so wie es bei mir vorher war senkrecht, oder?

    Genau, dann ist es leicht, die gleiche Höhe zu erreichen. Das Geheimnis ist wieder einmal das Flex-Layout, damit kann man sehr leicht die gleiche Höhe erreichen, siehe hier:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    align-items:stretch bewirkt, dass die Container auf gleiche Höhe gebracht werden. Da dies der Default-Wert ist, brauchte ich es nicht anzugeben. Und flex:1 bewirkt, dass die Container von der Breite her jeweils gleich sind.

    Wie ich schon schrieb, hatte ich anfangs deinen Ansatz mit den zwei Spalten benutzt, war damit aber nicht zum Ziel gekommen, die Container horizontal auf gleiche Höhe zu bringen. Mit fester Höhe wäre es natürlich kein Problem, aber es soll ja responsiv sein, d. h. sich an die Größe des Browserfensters anpassen.