zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Bilderanordnung Float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2018, 16:31
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 16:39 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.02.2018, 09:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.009
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.02.2018, 09:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von basti1012 (20.02.2018 um 09:56 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
bildanordnung, columns, float, right

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
navigation funktionert auf Tablet nicht leverkusenerjung CSS 1 10.01.2016 20:39
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12


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