XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Seltsame Erscheinung bei float:left (http://xhtmlforum.de/showthread.php?t=73184)

HeinrichK 18.03.2017 12:06

Seltsame Erscheinung bei float:left
 
Liste der Anhänge anzeigen (Anzahl: 1)
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.

MrMurphy 18.03.2017 13:37

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

HeinrichK 18.03.2017 15:41

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:05 Uhr.

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

© Dirk H. 2003 - 2023