|
|||
Element float nicht unterbrechen
Hallo zusammen,
ich habe eine kurze Frage bzgl. floats. Ich habe folgende Klasse: Code:
.three_column { float: left; margin: 5px; width: 356px; min-height: 200px; background: black; } Code:
<div class="three_column"></div> <div class="three_column"></div> <div class="three_column"></div> <div class="three_column"></div> <div class="three_column"></div> <div style="clear:borh;"></div> Die abstände sollten nicht sein und das 4.DIV z.B. soll ganz normal wieder unter dem ersten div angezeigt werden usw.. |
Sponsored Links |
|
|||
Wenn du so floaten möchtest, dass das vierte div genau unter dem ersten ist, also ohne Abstand, ist das meiner Meinung nach mit purem CSS nicht möglich. Zumindest nicht mit float oder display:inline-block.
Mit position: absolute würde das schon eher gehen, aber vielleicht hat jemand ne schönere Lösung. |
Sponsored Links |
|
|||
Hm, okay schade.
Wäre aufjedenfall die einfachste Variante mit Floats. Wie würde das denn theoretisch mit position absolute: gehen ? Rein mit CSS wird das dann ja nicht gehen weil die höhe von den divs ja nicht fest ist.. |
|
|||
position:absolute ist hier auf keinen Fall die Lösung. Das würde nur mehr Probleme machen als lösen.
Was du brauchst ist eine Lösung mit flexbox. Hier ist eine doch recht gute Erklärung. Das ist zwar viel Text aber es lohnt sich, das durchzulesen. Damit solltest du dein Problem lösen können. |
|
|||
Eine CSS Lösung ist für ein Layout-Problem immer einer JS-Lösung vorzuziehen.
Ob man Flexbox einsetzen soll muss jeder für sich entscheiden. Alternativ wäre eine CSS-Lösung mit floats und einem clear auf zB li:nth-child(3n+1) (oder bei welchem Element das Problem auch immer auftritt) eine Möglichkeit. Aber JS und position:absolute sind keine Lösungen für dieses Problem. |
|
|||
Ok danke.
Ich habe es zuerst so verstanden, dass das vierte div wirklich direkt ohne Abstand unter dem ersten sitzen soll, sodass es quasi teilweise noch neben dem zweiten ist.. das wäre mit Floats und Clear nicht möglich oder? |
|
|||
Habe es mit dem JS Plugin "Masory" gelöst.
Im Prinzip einfach ganz normal floaten. Das Plugin verhindert dann dass die vertikalen Abstände entstehen (Wird über Position absolute positioniert) Masonry |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
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 |
Webseite für Smartphones Optimieren | Cybertronic | CSS | 8 | 18.08.2011 10:16 |