Wie man Float eine Ziffer für HTML5 und CSS3 Programmierung

Die Absätze und andere Block-Elemente haben eine wohldefinierte Standardverhalten in CSS3. Sie nehmen die gesamte Breite der Seite, und das nächste Element erscheint unten. Wenn Sie das Element auf einen Absatz anwenden, wird das Verhalten dieses Absatzes nicht viel ändern, aber das Verhalten der Erfolg Absätze geändert wird.

Beginnen Sie mit der auf einer Seite mit drei Absätzen suchen. Paragraph 2 seine schweben Eigenschaft auf links.

bild0.jpg

Wie Sie sehen können, wird einige seltsame Formatierung hier auf. Werfen Sie einen Blick auf, was los ist:

  • Grenzen wurden auf die Absätze hinzugefügt. Wie Sie sehen werden, ist die Breite eines Elements nicht immer offensichtlich durch ihren Inhalt suchen. Wenn Sie Herumspielen mit schweben, es könnte sinnvoll sein, Grenzen zu den Absätzen hinzufügen, so können Sie sehen, was los ist. Sie können jederzeit die Grenzen entfernen, wenn Sie es richtig funktioniert haben.

  • Der erste Absatz wirkt normalerweise. Der erste Absatz hat das gleiche Verhalten, das Sie in allen Block-Stil-Elemente zu sehen. Es nimmt die gesamte Breite der Seite, und das nächste Element wird darunter angebracht werden.

  • Der zweite Absatz ist ziemlich normal. Der zweite Absatz hat seine schweben Attribut auf links. Dies bedeutet, dass der Absatz in seiner Normalposition gebracht werden, sondern daß andere Text wird auf der rechten Seite dieses Elements angeordnet werden.

  • Der dritte Absatz scheint dünn. Der dritte Absatz scheint die zweite zu umgeben, aber der Text wird nach rechts gedrückt. Das schweben Parameter im vorherigen Absatz bewirkt dies eine in jedem verbleibenden Raum platziert werden (was derzeit nicht viel ist). Der verbleibende Platz auf der rechten und schließlich unterhalb des zweiten Absatzes.

Der Code, dies zu produzieren ist einfach HTML mit ebenso einfachen CSS-Markup:

floatDemo
Float Demo
§ 1. Dieses Absatz hat das normale Verhalten eines Blockebene element.It nimmt die gesamte Breite der Seite nach oben, und die nächste elementis darunter platziert.
Ziffer 2.Dieser Absatz links schwebte. Es wird nach links gelegt und thenext Element wird rechts davon angeordnet werden.
Ziffer 3. Diese Ziffer hat keine schwimmen, Breite oder Marge. Es dauert whateverspace es kann auf der rechten Seite des Floats, und dann flowsto die nächste Zeile.

Wie Sie aus dem Code sehen können, gibt es eine einfache Klasse namens schwebten mit dem schweben Eigenschaft auf links. Die Absätze werden in der gewöhnlichen Weise definiert. Auch wenn Absatz 2 scheint innerhalb Absatz 3 im Screenshot eingebettet werden, zeigt der Code deutlich, dass dies nicht der Fall ist. Die beiden Absätze sind völlig voneinander getrennt.

Ähnliche

Menü