Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
CSS Fluss-Layout
Normaler Fluss, oder Fluss-Layout, ist die Art und Weise, wie Block- und Inline-Elemente auf einer Seite angezeigt werden, bevor Änderungen an ihrem Layout vorgenommen werden. Der Fluss ist im Wesentlichen eine Reihe von Dingen, die alle zusammenarbeiten und über das Layout Bescheid wissen. Sobald etwasaus dem Fluss genommen wird, arbeitet es unabhängig.
Im normalen Fluss werdenInline-Elemente in der Inline-Richtung angezeigt, also in der Richtung, in der Wörter in einem Satz entsprechend demSchreibmodus des Dokuments angezeigt werden.Block Elemente werden nacheinander angezeigt, so wie Absätze im Schreibmodus dieses Dokuments. Im Englischen werden daher Inline-Elemente nacheinander angezeigt, beginnend von links, und Block-Elemente beginnen oben und bewegen sich die Seite hinunter.
Einfaches Beispiel
Das folgende Beispiel zeigt Block- und Inline-Level-Boxen. Die beiden Absatz-Elemente mit einem grünen Rahmen sind Block-Level und werden untereinander angezeigt.
Der erste Satz enthält auch ein Span-Element mit einem blauen Hintergrund. Dies ist Inline-Level und wird daher an Ort und Stelle im Satz angezeigt.
<div> <p> One <span>November</span> night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. </p> <p> Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact. </p></div>body { font: 1.2em sans-serif;}p { border: 2px solid green;}span { background-color: lightblue;}