XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Bilderanordnung Float (http://xhtmlforum.de/showthread.php?t=73429)

Mando 16.02.2018 15:31

Bilderanordnung Float
 
Liste der Anhänge anzeigen (Anzahl: 2)
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?

cloned 19.02.2018 08:22

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.

basti1012 20.02.2018 08:33

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019