Galerie - Viel Whitespace bei Bilder in einer Galerie

niklasxyz · 9. Dezember 2016

Hallo, Ich habe 4 Bilder, die ich unter einander, mit 2 Bildern pro Reihe anordenen sollen.
Die erste Reihe funktioniert gut nur hat das dritte Bild wird nicht links angezeigt sondern rechts
und mein viertes wird dann in einer neuen Reihe angezeigt.
Vielen Dank schon mal und ich bin Anfänger sowohl in HTML als auch hier im Forum[Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/wink.png]
P.s. Im Anhang noch ein Bild von dem was ich meine.
Hier der HTML Code:

HTML

<img class="firstrow" src="img/Studio/Kaffe_Splash.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Seifenblase1.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Wasser&ÃÂ–l.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Farbexplosion.jpg" alt="#">

Und der Css Code:

CSS

.firstrow {
    max-width: 50%;
    float: left;
    max-width: 49.4%;
    padding: 5px;
}

MrMurphy · 9. Dezember 2016

Hallo

Kann es sein dass das dritte Bild wegen des Namens

Code

Wasser&ÃÂ–l.jpg

überhaupt nicht angezeigt wird?

Gruss

MrMurphy

Jav · 9. Dezember 2016

setz doch einfach ein <br> nach dem zweiten Bild, wird doch dann automatisch die nächste Zeile.

MrMurphy · 9. Dezember 2016

Hallo

Ich habe keinen Zugriff auf deine Bilder.

Gruss

MrMurphy

Sempervivum · 9. Dezember 2016

So funktioniert es:

<img class="firstrow" src="images/dia0.jpg" alt="#"><img class="firstrow" src="images/dia1.JPG" alt="#"><img class="firstrow" src="images/dia2.JPG" alt="#"><img class="firstrow" src="images/dia3.JPG" alt="#">
<style>
.firstrow {
max-width: calc(50% - 10px);
padding: 5px; }
</style>
Die img-Tags müssen dabei ohne Zeilenumbruch in einer Zeile notiert werden.

niklasxyz · 10. Dezember 2016

Ich habe jetzt eine Lösung gefunden und es mit calc() umgesetzt. Es lag denke ich an den unterschiedlichen Größen der Bilder, da es mit Bildern der gleichen Größe klappte.
Vielen Dank an alle:D

Galerie - Viel Whitespace bei Bilder in einer Galerie

Jetzt mitmachen!

Teilen