Hallo, ich würde gerne Bilder anordnen das diese neben und untereinander angeordnet werden. Das ganze soll am Ende so aussehen das das einen Block ergibt. Ein Bild rutscht aber immer nach unten raus und ich weiß nicht wie ich das hinbekomme das es nicht passiert. Bild 1 ist wie es aussehen soll, Bild2 ist wie es aktuell aussieht.

HTML:

<div class="zwei columns"><img src="img/quer.jpg" /></div>
<div class="zwei columns"><img src="img/quer.jpg" /></div>
<div class="zwei columns" style="float:right;"><img src="img/hochformat.jpg"/></div>
<div class="zwei columns"><img src="img/hochformat.jpg"/></div>
<div class="zwei columns"><img src="img/quer.jpg"/></div>
<div class="zwei columns"><img src="img/hochformat.jpg"/></div>
<div class="zwei columns"><img src="img/quer.jpg"/></div>
<div class="zwei columns"><img src="img/quer.jpg"/></div>
<div class="zwei columns"><img src="img/quer.jpg"/></div>

CSS:

.columns {
position: relative;
overflow: hidden;
text-align: center;
line-height: 0;
float: left;
display: inline;
margin: 0.5%;
}

.eine.columns { width: 24%; }
.zwei.columns { width: 32.33333%; }
.drei.columns { width: 49%; }
.vier.columns { width: 65.66666%; }
.sechs.columns { width: 99%; }

Vielleicht kann mir jemand helfen?

Angehängte Grafiken

	web1.jpg (61,5 KB, 3x aufgerufen)
	web2.jpg (61,6 KB, 1x aufgerufen)

Stelle bitte ein funktionierendes Beispiel zusammen. Kopiere ich deinen Code dann habe ich erstens die Bilder nicht und zweitens sehe ich das Problem nicht.
So kann ich nur raten und allgemeine Ratschläge geben:
- Warum werden hier floats und nicht grid-Layout verwendet? Oder zumindest flexbox?
- Kommt das Element nach dem letzten rechts unten? Dann hast gar keine Chance das mit floats so hinzubekommen wie du möchtest.

meinst du das in etwa so https://jsfiddle.net/basti1012/e1ddbsov/29/