Hallo, ich habe vier Divs die immer zu zweit nebeneinander bzw. untereinander angeordnet werden sollen. Das ganze klappt auch ziemlich gut, bis man die Bildschirmgröße ändert. Wird der Bildschirm kleiner, so sollen die Divs nur noch untereinander angeordnet werden, dafür aber auf die gesamte Breite gestreckt werden und vor allem bei der mobilen Ansicht ist es wichtig, dass alles untereinander ist, da es sonst zu klein ist. Ich kriege das nur leider nicht hin.
Der Code:
HTML:
HTML-Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head> <meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="CSS/stylesheet.css">
</head>
<body>
<div class="main">
<div class="element">
<img src="PIC/wohnen.jpg" alt="" />
<div class="content">
<h2> Wohnen </h2>
<p>Wo werden Wohnungen gebraucht? Wo gibt es Leerstand? Auf diese Frage will die Vision Bergstraße Antworten finden.</p>
</div>
</div>
<div class="element">
<img src="PIC/gesundheit.png" alt="" />
<div class="content">
<h2> Gesundheit </h2>
<p>Die Bevölkerung ändert sich - die gesundheitliche Versorgung muss sich anpassen. Was brauchen wir im Kreis Bergstraße?</p>
</div>
</div>
<div class="element">
<img src="PIC/infrastruktur.PNG" alt="" />
<div class="content">
<h2> Infrastruktur </h2>
<p>Vom Einzelhandel über Kitas bis hin zum ÖPNV: Was braucht der Kreis Bergstraße in Zukunft für eine Infrastruktur?</p>
</div>
</div>
<div class="element">
<img src="PIC/dialog.PNG" alt="" />
<div class="content">
<h2> Bisherige Online-Dialoge zur Vision Bergstraße </h2>
<p>Was ist Ihnen wichtig für den Kreis Bergstraße? Zum Start der Vision Bergstraße im November 2017 konnten Sie sich auf dieser Plattform in einer Umfrage beteiligen. Die Ergebnisse der Umfrage finden Sie hier.</p>
</div>
</div>
</div>
</body>
</html>
Alles anzeigen
CSS:
HTML-Code:
body{ margin: 0px; padding: 0px;}
.main{ max-width: 1500px; margin: auto;}
.element{ float:left; width: 48%; min-width: 410px; margin: 1%; margin-bottom: 0px; padding-bottom: 0px; background-color: lightblue;}
.element img{ width: 100%;}
.element .content { text-align: left; padding: 3%;}
PS: Die Bilder haben alle eine Größe von 591 x 394 Pixel, das dürfte wichtig sein.
Ich lade das Projekt auch mal hoch, falls es jemand testen will. Ich konnte leider nur eines der 4 Bilder drin lassen, da es sonst zu groß gewesen wäre.
Vielen Dank schon mal im voraus für die Hilfe!
