zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Element float nicht unterbrechen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.01.2015, 01:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2009
Beiträge: 24
elias1993 befindet sich auf einem aufstrebenden Ast
Standard 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; }
Hiermit wird über eine Schleife (PHP) ein div generiert und mit Inhalt gefüllt welcher unterschiedlich groß ist.
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>
Ich habe einen Screenshot angehängt mit meinem Problem, weiß hierfür jemand eine Lösung ?
Die abstände sollten nicht sein und das 4.DIV z.B. soll ganz normal wieder unter dem ersten div angezeigt werden usw..
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2015-01-11 um 23.50.14.png (52,0 KB, 14x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.01.2015, 09:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.01.2015, 19:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2009
Beiträge: 24
elias1993 befindet sich auf einem aufstrebenden Ast
Standard

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..
Mit Zitat antworten
  #4 (permalink)  
Alt 13.01.2015, 08:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2015, 09:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Ist denn in diesem Fall eine Flexbox-Lösung einer Javascript-Lösung vorzuziehen? Ich frage nur wegen der Browserkompatibilität
Mit Zitat antworten
  #6 (permalink)  
Alt 13.01.2015, 09:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.01.2015, 09:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.01.2015, 10:18
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
.. das wäre mit Floats und Clear nicht möglich oder?
Doch, natürlich. Das jeweils erste Element einer neuen Reihe muss halt clearen.

Will man, dass keine Lücken (vertikal) zwischen den Inhalten entstehen, ist mir nur eine solide Lösung bekannt: die Elemente werden in Spalten unterteilt, beispielsweise mit einem extra div pro Spalte.
Unter bestimmten Voraussetzungen (Anzahl, Reihenfolge und die zu erwartende Höhe der Elementen) ist es auch ohne zusätzlichen Markup möglich, die Elementen in bis zu drei Spalten aufzuteilen, so dass keine vertikale Lücken entstehen:
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>elias1993 :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
ul {
  width: 200px;
  margin: 0 auto;
  padding: 0 200px;
  list-style-type: none;
}
ul:before, ul:after { display: table; content: ''; } ul:after { clear: both; }
li {
  width: 180px;
  padding: 10px;
}
li:nth-child(1),
li:nth-child(3) {
  clear: left;
  float: left;
  margin-left: -200px;
}
li:nth-child(2),
li:nth-child(4) {
  clear: right;
  float: right;
  margin-right: -200px;
}
/* Hintergundfarben */
ul {
  border: 10px solid #aaa;
  background-color: #aaa;
}
li:nth-child(1),
li:nth-child(2),
li:nth-child(6) {
  background-color: #ddd;
}
li:nth-child(3),
li:nth-child(4),
li:nth-child(5) {
  background-color: #ccc;
}
</style>
<ul>
  <li>1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>2 Lorem ipsum dolor nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
  <li>3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>4 At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>5 At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>6 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>
Ansonsten sucht man sich die passende Lösung aus den schon besprochenen Lösungswege: float (jeder ersten Element einer neuen Reihe cleart), flexbox, display: inline-block (evtl. in Kombination mit „text-aligh: justify | center;“, etc.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #9 (permalink)  
Alt 14.01.2015, 19:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2009
Beiträge: 24
elias1993 befindet sich auf einem aufstrebenden Ast
Standard

Super, vielen Dank für eure ganzen Antworten.
Werde es die Tage ausprobieren und aufjedenfall kurz eine Rückmeldung geben was für mich am besten funktioniert hat!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.02.2015, 21:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2009
Beiträge: 24
elias1993 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:30 Uhr.