Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 16.02.2018, 15:31
Mando Mando ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2013
Beiträge: 4
Mando befindet sich auf einem aufstrebenden Ast
Standard 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?
Angehängte Grafiken
Dateityp: jpg web1.jpg (61,5 KB, 3x aufgerufen)
Dateityp: jpg web2.jpg (61,6 KB, 1x aufgerufen)

Geändert von Mando (16.02.2018 um 15:39 Uhr)
Mit Zitat antworten
Sponsored Links