You are viewing a single comment's thread from:

RE: 2017 Woche 36 - Ohne Zusammenhang / Without Any Context / Deutsch / English

in #deutsch8 years ago

Was ich ja nicht verstehe:

wenn man zweimal hintereinander <div class="pull-left"> benutzt,
warum dann trotzdem das zweite in die rechte Spalte flutscht?

Ich vermute mal laienhaft:

der Begriff <div class="pull-left"> halbiert die Zeilenbreite.
Da nach dem zweiten <div class="pull-left"> eine Trennung mittels Linie oder Bildlinie erfolgt, ordnet sich das zweite <div class="pull-left"> oben neben das erste hin.

Ich glaube, ich sollte erst mal auf youtube nach einer Einführung zu HTML schauen ;-)

Lieben Gruß

Sort:  

In der "pull-left"-Klasse ist "float: left" definiert. Der Klassenname "pull-left" wurde von Steemit festgelegt und die Eigenschaften dieser Klasse bestimmen das Verhalten der betroffenen Elemente.

"float: left" (Englisch für "fließe: links") bewirkt, dass ein Block-Element nicht unbedingt die volle Breite ausschöpfen muss und dadurch nur wenn es zu eng wird einen Umbruch auslöst. Es fließt also im Prinzip an die linke Seite, anstatt ein fester Block über die gesamte Breite zu sein.

Da die maximale Breite 50% beträgt (ebenfalls von Steemit für "pull-left" so festgelegt) und das zweite <div> ebenfalls nach links geschoben wird, passt alles genau in einer Zeile ;)

Damit die Spalten die maximale Breite von 50% nutzen, habe ich das transparente Bild eingefügt. Beim ersten ganz oben brauchte ich es nicht, weil dort bereits ein <h2>-Element enthalten ist, was denselben Effekt hat, da es ein Block-Element über die volle Breite ist (erzeugt ja auch immer einen Umbruch).

Super erklärt! Vielen Dank!

Und schönen Abend noch!