2 DIV mit CSS responsiv nebeneinander platzieren?
Hallo allerseits, ich versuche gerade seit zwei Tagen verzweifelt den gleichen Look zu kriegen wie der FAQ-Bereich auf folgender Seite ganz unten: https://rlax.me/
Das heißt ich möchte auf beiden Seiten mehrere Slide-Elemente haben, die unabhängig voneinander auf und zu gehen. Auf kleineren Displays soll es dann zusammengerückt werden, sodass der rechte Bereich dann unter dem unteren angezeigt wird. Aber irgendwie bekomme ich es einfach nicht hin. Ich hoffe Ihr könntet mir vielleicht etwas auf die Sprünge helfen. Hier mein Code aktuell:
<html>
<head>
<style>
#left { display:block; }
#right { display:block; }
.slides {padding:0px; margin:0px auto;}
.show {display:grid; grid-template-rows:0; overflow:hidden; transition:0.75s; width:100%; margin:5px 0;}
.show-start {min-height:0;}
.show-end {min-height:0; align-self:end;}
.show p {margin:0; padding:0; text-align:justify; color:#121212;}
details.more[open] + div {grid-template-rows:10fr; padding-bottom:10px; outline:0;}
details summary {cursor:pointer; -webkit-tap-highlight-color:#000000; color:#121212; background-color:lightgrey; padding:10px}
details summary:focus {outline:none !important;}
</style>
</head>
<body>
<div class="slides" id="left">
<details class="more"><summary>The Night Café</summary></details>
<div class="show">
<div class="show-start">
<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
<br>
<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
</div>
</div>
<details class="more"><summary>The Night Café</summary></details>
<div class="show">
<div class="show-start">
<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
<br>
<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
</div>
</div>
</div>
<div class="slides" id="right">
<details class="more"><summary>The Night Café</summary></details>
<div class="show">
<div class="show-start">
<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
<br>
<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
</div>
</div>
<details class="more"><summary>The Night Café</summary></details>
<div class="show">
<div class="show-start">
<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
<br>
<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
</div>
</div>
</div>
</body>
</html>
2 Antworten
Pack deine .slides-Container in einen zusätzlichen Container und nutze für den ein Flexlayout. Via Media Query kannst du bestimmen, ab welcher Breite die Container umbrechen sollen.
HTML:
<section class="slide-container">
<div class="slides" id="left">
<!-- ... -->
</div>
<div class="slides" id="right">
<!-- ... -->
</div>
</section>
CSS:
.slide-container {
display: flex;
gap: 10px /* optional distance between flex items */
}
@media screen and (max-width: 410px) { /* or any other screen width */
.slide-container {
flex-wrap: wrap;
}
}
PS.: Wenn dein Codesnippet tatsächlich dem vollständigen Code von dir entsprechen sollte, dann ist dieses als HTML-Dokument unvollständig. Es fehlt der Doctype und ein title-Element innerhalb des head-Bereichs.
Genau, dafür ist der wrap: https://jsfiddle.net/k8beon6t/
Der Umbruch erfolgt aber nur, wenn die Flex-Items so viel Platz einnehmen, dass sie eine eigene Zeile bräuchten. Blockelemente nehmen standardmäßig die volle Breite ihres Containers (in dem Fall von .slides-container) ein.
Schau, ob:
- du die Breite der .slides-Boxen nachträglich begrenzt.
- ob dein Media Query passt. In den Entwicklertools deines Browsers (Ctrl + Shift + M in Chrome, Firefox, in anderen Browsern ist der Weg womöglich anders) kannst du verschiedene Bildschirmbreiten (bspw. von mobilen Endgeräten) nachstellen/testen.
Cool! Ja, habe gerade gesehen, wenn ich das auf dem Handy öffne, klappt es so wie in dem fiddle. Nur wenn ich es unter Chrome mit "Untersuchen" teste, dann wird es komischerweise so dargestellt wie vorhin. Aber denke das wird dann eher an Chrome liegen, auf dem Handy klappt es ja.
Jetzt habe ich aber Texte eingefügt und die linke Seite wurde sehr breit und hat viel mehr Platz eingenommen als die rechte Seite. Ich dachte ich könnte left und right mit max-width:50%; einfach begrenzen. Hat auch auf dem Desktop erstmal zu dem gewünschten Ergebnis geführt. Aber beim Test mobil habe ich jetzt festgestellt, dass es auch natürlich auch mobil beide Seiten begrenzt. Aber auf mobil soll es ja natürlich die volle Breite haben.
Das hier ist mein modifiziertes CSS:
.slide-container {
display: flex;
gap: 10px /* optional distance between flex items */
}
@media screen and (max-width: 410px) { /* or any other screen width */
.slide-container {
flex-wrap: wrap;
}
}
#left { display:block; max-width: 50%;}
#right { display:block; max-width: 50%;}
.slides {padding:0px; margin:0px auto;}
.show {display:grid; grid-template-rows:0; overflow:hidden; transition:0.75s; width:100%; margin:5px 0;}
.show-start {min-height:0;}
.show-end {min-height:0; align-self:end;}
.show p {margin:0; padding:0; text-align:justify; color:#121212;}
details.more[open] + div {grid-template-rows:10fr; padding-bottom:10px; outline:0;}
details summary {cursor:pointer; -webkit-tap-highlight-color:#000000; color:#121212; background-color:lightgrey; padding:10px}
details summary:focus {outline:none !important;}
Aber denke das wird dann eher an Chrome liegen, (...)
Nein, in Chrome funktioniert es genauso. Ich gehe davon aus, dass du unterschiedliche Zustände getestet hast.
Aber auf mobil soll es ja natürlich die volle Breite haben.
Du kannst den Media Query erweitern oder bei Bedarf weitere Media Queries definieren. Einen Einführungsartikel zu Media Queries findest du hier.
Auf die ID-Selektoren würde ich im Übrigen verzichten. Du brauchst sie nicht. Auch das display-Property brauchst du nicht setzen, denn div-Elemente sind von sich aus immer Blockelemente.
Beispiel:
.slides {
margin: 0 auto;
padding: 0;
width: 50%;
}
@media screen and (max-width: 410px) { /* or any other screen width */
/* ... */
.slides {
width: 100%
}
}
Danke für die schnelle Antwort! 😃
Bin jetzt im Bett, muss morgen leider um halb 5 raus. Werde es aber Morgen Nachmittag testen mit der Lösung 👍
Ja, das Doctype und title tag habe ich jetzt hier ausgelassen, dachte das ist für die Lösung jetzt irrelevant. Aber habe ich natürlich drin 😉
Am besten Flexbox anweden oder Grid
@regex9 Danke nochmal für den Code. Das hat auf jeden Fall schon mal geholfen die beiden DIVs left und right entsprechend zu positionieren. Auf dem Desktop in voller Größe sieht es jetzt gut aus.
Problem ist jetzt nur noch, dass es auf kleineren Screens leider nicht untereinander geschoben wird. Ich dachte das würde das flex-wrap:wrap machen, oder??
So sieht es jetzt wenn ich es für Mobilgeräte teste: Bild
Hast du eine Idee dafür?