Bilderanordnung Float
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?
Geändert von Mando (16.02.2018 um 16:39 Uhr)
|