zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seltsame Erscheinung bei float:left

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2017, 11:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2006
Beiträge: 25
HeinrichK befindet sich auf einem aufstrebenden Ast
Standard Seltsame Erscheinung bei float:left

Hallo,

ich möchte Inhalte (Bilder u.a.) horizontal nebeneinander anordnen. Wenn der Bildschirm kleiner ist, sollen die Inhalte untereinanderfließen (wie ein Zeilenumbruch).
CSS:
Code:
.kalmon {
	width:auto; 
	float: left;
	padding: 0.3em;
}
HTML bzw. PHP:
PHP-Code:
for($monat=1;$monat<=12;$monat++) {
echo 
"<div class='kalmon'>";
/* Hier der Inhalt. In diesem Fall ein script, das einen Jahreskalender in Monatsblöcken erzeugt */
echo "</div>";
// ENDE for 
Auf dem Smartphone sieht's schön aus (alle Monate untereinander). Bei größeren Bildschirmen erscheint z.B.:
1.Reihe: 6 Monate nebeneinander
2. Reihe: 2 Monate (rechtsbündig)
3. Reihe: 1 Monat (rechtsbündig)
4. Reihe: 3 Monate (linksbündig)
-> siehe beigefügtes Bild

Hat jemand einen Tipp, was ich falsch mache bzw. ändern müsste? Danke schon mal.
Angehängte Grafiken
Dateityp: jpg screenshot_kalender.jpg (477,6 KB, 12x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2017, 12:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 955
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Mit deinem Quelltext können wir leider überhaupt nichts anfangen. Ein Link zu der Seite wäre sinnvoller.

Erst mal ein Grundsatz: float hat mit links- oder rechtsbündung nichts, aber auch gar nichts, zu tun. Die Verwendung von links- oder rechtsbündung im Zusammenhang mit float führt zu falschen Vorstellungen.

Alle deine Monate wollen nach links rutschen.

Allerdings bleibt der Juli am April hängen, weil der April wohl etwas höher als der Mai ist.

Der September bleibt am Juli hängen, weil der Juli höher als der August ist.

Der Oktober wird nicht ausgebremst und rutscht deshalb wieder ganz nach links.

Float ist dafür gedacht das Text andere Elemente umfließen kann. Da es früher keine besseren Möglichkeiten gab wurde es auch zur Anordnung von Elementen mißbraucht.

Um Elemente wie von dir gewünscht anzuordnen wurde mittlerweile Flexbox erdacht und kann heutzutage problemlos angewendet werden.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2017, 14:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.01.2006
Beiträge: 25
HeinrichK befindet sich auf einem aufstrebenden Ast
Standard

Hi Murphy,

mit dem links- und rechtsbündig hatte ich auch nichts vor. Das war nur zur Beschreibung, wie es aussieht.

Aber danke für deine Tipps. Das Problem der unterschiedlichen Höhen der Monate war mit einem min-height schnell zu beheben.

Dennoch will ich mir die Flexbox mal anschauen. Hatte ich beim Gegoogel auch schon in den Blick bekommen.

Nochmal danke - Problem gelöst (wie markiert man diesen Thread als gelöst?)
Mit Zitat antworten
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
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation rutscht heraus Muamicus CSS 19 04.01.2011 19:04
Wordpress: Content im Quelltext VOR allem anderen, aber wie? Bichareh CSS 4 13.06.2009 16:15
Content Bereich verschiebt sich im IE Hotbananaoli CSS 12 26.02.2009 17:33
Problem mit Float bei der Navigation Julez84 CSS 1 09.08.2007 11:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:40 Uhr.