JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="iandarfdas, post: 12542, member: 4240"] Schönen guten Abend, ich sitze gerade an einer Website und probiere ein Problem zu lösen, wofür mir nicht einmal ein Lösungsansatz einfällt. Ich habe 2 div-Container, welche jeweils beinhalten: ein Text und ein Bild. Diese Container sollen auch angezeigt werden, jedoch wenn im 1. Div der Text links ist, soll der Text im 2. Div rechts sein. Also immer abwechselnd. Das bekomme ich auch hin. Mit display: flex, sogar ohne float-Befehl (kann man bestimmt effizienter lösen). Jetzt möchte ich aber wenn der Bildschirm kleiner wird bspw. Mobile-Ansicht, dass sich Text und Bild im großen Div untereinander anordnen. Hierbei ist das Problem, dass folgende Reihenfolge entsteht aufgrund der Anordnung im HTML-Text: Text Bild Bild Text und das sieht blöd aus... ich möchte: Text Bild Text Bild [CODE=html] <div id="section1"> <div id="projekte-text"> Projekte: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div id="projekte-pic"> <img src="images/car7.jpg" width="100%" height="auto"> </div> </div> <div id="section2"> <div id="kontakt-pic"> <img src="images/car6.jpg" width="100%" height="auto"> </div> <div id="kontakt-text"> Kontakt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet. </div> </div>[/CODE] [CODE=css]#section1 { margin: 5% auto; overflow: auto; display: flex; align-items: center; border-style: solid; border-width: 3px; border-radius: 10px; } #projekte-text { padding: 1%; font-size: 1vw; width: 48%; text-align: center; } #projekte-pic { padding: 1%; width: 48%; } #section2 { margin: 5% auto; overflow: auto; display: flex; align-items: center; border-style: solid; border-width: 3px; border-radius: 10px; } #kontakt-text { padding: 1%; font-size: 1vw; width: 48%; justify-content: center; text-align: center; } #kontakt-pic { padding: 1%; width: 48%; } @media (max-width: 60em) { #section1 { margin: 5% auto; display: unset; align-items: center; text-align: center; border: none; padding: auto; } #projekte-text { padding: none; font-size: 4vw; width: 90%; float: none; text-align: center; margin: 2.5% auto; } #projekte-pic { padding: none; font-size: 4vw; width: 90%; float: none; text-align: center; margin: 2.5% auto; } #section2 { margin: 5% auto; display: block; align-items: center; text-align: center; border: none; padding: auto; } #kontakt-text { padding: none; font-size: 4vw; width: 90%; float: left; text-align: center; margin: 2.5% auto; } #kontakt-pic { padding: none; width: 90%; float: right; margin: 2.5% auto; } }[/CODE] ich hoffe man versteht, was ich meine. Vielen Dank im Voraus. Mit freundlichen Grüßen iandarfdas [/QUOTE]

Authentifizierung