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

  • Upsala, danke für den Hinweis!


    Soll ich den gesamten HTML / CSS Code posten? Oder wie macht es in der Regel am meißten Sinn.

    Danke für deine Rückmeldung!

  • Hallo


    Denk bitte daran, dass wir auch die Bilder brauchen.


    Eine mögliche Lösung hängt zudem vom konkreten Inhalt und der Beziehung des Inhalts zu den Bildern ab. Deshalb benötigen wir den konkreten Textinhalt und nicht irgendwelche Lorem-ipsum-Texte.


    Gruss


    MrMurphy

  • Ich bekomme das HTML nicht mit dem Screenshot zusammen: Im HTML kommt erst ein Bild, dann ein Textabsatz und dann ein div mit einem Bild drin. Im Screen dagegen oben Text, dann je ein Bild und dann darunter Text mit Überschrift?

  • 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?

  • Hallo


    Zitat

    Mal sehen, wie MrMurphy es macht.


    Ohne die Texte und die Grafiken zu kennen, und damit die Zusammenhänge untereinander, lässt sich überhaupt kein korrekter Quelltext erstellen. Darauf habe ich nicht aus lauter Langeweile hingewiesen.


    Gruss


    MrMurphy

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!