• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Lücken im responsive image grid

sunshine*555

sunshine*555

Neues Mitglied
Hallo liebe Community,

ich habe einen Code für eine responsive Bildergalerie. Allerdings entstehen Lücken in der Gallerie. Liegt es an meinem Code? Wie muss ich ihn schreiben, dass die Bilder irgendwie automatisch eingpasst werden und die Seite keine weißen Lücken hat?

Das ist der Code:

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* 2 equal columns */

.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive - two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>

<body>

<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Grid -->

<div class="row">
<div class="column">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--10.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--2.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--3.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--4.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--5.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--7.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--8.jpg" style="width:100%">
</div>
<div class="column">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--9.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT--11.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-1.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-13.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-33.jpg" style="width:100%">

</div>
<div class="column">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-57.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-65.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-BT-68.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-2.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-5.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-11.jpg" style="width:100%">
</div>
<div class="column">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-12.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-15.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-18.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-31.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-35.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-37.jpg" style="width:100%">
</div>
<div class="column">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-40.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-48.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-61.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-74.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-91.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-95.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-110.jpg" style="width:100%">
</div>
<div class="column">

<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-130.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-153.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-158.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-177.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-178.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-180.jpg" style="width:100%">
</div>
<div class="column">

<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-194.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-204.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-209.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-224.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-224.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-224.jpg" style="width:100%">
<img src="images/eindrueke/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-NA-224.jpg" style="width:100%">
</div>
</div>
</body>

</html>
 
Werbung:
Da man sich das nirgends per Link ansehen kann, kann ich nur raten, dass es an den Whitespaces zwischen den Elementen liegt. Ergänze mal bei .row und .column noch ein
Code: 
font-size: 0;
und allgemein alle Abstände auf 0 setzen:
Code: 
* { margin: 0;padding: 0; }
 
Danke für deine Hilfe!! Jetzt hat es zwar überall die Abstände rausgenommen, die Bilder sind also nahtlos nebeneinander, die Lücken tauchen allerdings immer noch auf. Ich lad das jetzt mal hoch und melde mich gleich nochmal. Dann kannst du es sehen.
 
Werbung:
So, hier ist der Link. Es dauert allerdings kurz bis alle Bilder ordentlich geladen haben. Wenn man runterscrollt sieht man nur rechts drei große Lücken. Ich hab auch schon getestet, was passiert, wenn ich in alle divs gleich viele Bilder packe (gerade habe ich immer 7 Bilder, dann 6, dann 7, dann 6.) Aber auch dann bleiben die Lücken bestehen. Ich weiß nicht, wie ich den Code alternativ schreiben kann, um das gleiche responsive Ergebnis zu erlangen.

Link: https://bit.ly/2Mw3asJ
Code ist wieder der selbe wie oben, da die Veränderungen nur die Zwischenabstände weggenommen haben, die Lücken aber nicht :(
 
Ah okay, das macht natürlich Sinn. Vielen Dank :) Dann werde ich das so hinbasteln. Falls es eine noch elegantere Code-Lösung gibt, wäre ich dafür dankbar.
 
**********************************************

Everytime someone spams, god kills a kitten.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Nette Schleichwerbung :D Ja, ich bin zurecht gekommen. Ich hab Grafikdesign studiert, brauche da keinen Fachmann.
LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben