Hallo,
ich habe 3 Divs welche den Bildschirm immer komplett ausfüllen sollen. Unabhänig der Bildschirmgröße (PC-Bildschirme, für Handys ist die Gestaltung bereits so wie sie soll), sollen die 3 Divs den Bildschirm immer zu fast 100% ausfüllen (margin links und Rechts soll 20px, und der Abstand zwischen den Divs soll 10px betragen.) Alle 3 Divs sollen immer gleich groß sein, unabhänig der Menge des Contents.
Das ist meine Bisherige Lösung:
<div class="maincalss">
<h1 id="ueber_uns">Über uns</h1>
<div class="card">
<h2 class="cardh2">Wer ist Einsatzfahrten Baden-Württemberg?</h2>
Einsatzfahrten Baden-Württemberg ist eine Instagram Seite, welche in Zusammenarbeit mit einigen
ehrenamtlichen Reportern Bilder und Videos von Einsatzfahrzeuge, und auch deren Einsatzfahrten
in Baden-Württemberg veröffentlicht.
</div>
<div class="card">
<h2 class="cardh2">Wie entstand Einsatzfahrten Baden-Württemberg</h2>
Einsatzfahrten Baden-Württemberg entsdand im Sebtember 2016 durch unseren Projektleiter und Gründer
Max XXX. Nach und nach traten uns mehrere Reporter bei, welche uns seit daher regelmäßig mit
Bild- und Videomaterial versorgen.
</div>
<div class="card">
<h2 class="cardh2">Wie kann man bei uns mitmachen?</h2>
Mitmachen kann man bei uns, in dem man sich über unser <a href="#">Bewerbungsformular</a> mit einer
Aussagekräftigen Bewerbung und einem Beispielfoto bewirbt. Unsere Projektleiter werden sich diese dann
anschauen und gemeinsam über eine Aufnahme in das Reporterteam entscheiden.
</div>
</div>
Alles anzeigen
.card {
max-width: 31%;
min-width: 12%;
height: 200px;
display: inline-block;
border: 1px solid lightgrey;
border-radius: 5px;
margin-left: 10px;
box-shadow: 1px 1px grey;
padding-left: 5px;
padding-right: 5px;
}
Alles anzeigen
Das ganze funktioniert auch, so lange ich es auf dem Bildschirm mit dem ich es getestet habe teste. Sobald ich einen anderen Bildschirm nutze, geht es nicht mehr.
Das ist das gewollte Ergebnis: http://prntscr.com/vjzbbd
Und das auf einem kleineren Bildschirm: http://prntscr.com/vjzccv
Hat einer von euch eine Idee, wie ich das lösen kann? Es soll auf allen PC-Bildschirmen, unabhänig der Größe genau so angezeigt werden (abgesehen der Text-zeilenumbrüche.). Für Handys hab ich es so umgesetzt, das alle DIVs untereinander mit width: 100% angezeigt werden.