CSS ziehen nach rechts
Beispiel 01:
In unserem ersten Beispiel werden wir die Float -Eigenschaft verwenden, um die verschiedenen Elemente nach rechts, links und nirgends zu ziehen. Außerdem werden wir diese Eigenschaften miteinander vergleichen, um ein besseres Verständnis zu erhalten. Wir beginnen unser erstes Beispiel mit dem Standard-HTML-Dokumentformat, das für die Erstellung von HTML-basierten Webseiten verwendet wird. Das Head -Tag enthält den Titel der HTML -Seite, die mit Hilfe eines internen "Titel" -Tags erstellt werden soll. Danach haben wir ein Style -Tag und das Hauptkörper -Tag. Bevor wir uns das CSS -Styling einer HTML -Seite ansehen, müssen wir uns den Körper ansehen, der gestylt werden wird. Der Körper dieser HTML -Seite enthält die einfache Größe 1 und das Haupt -Div -Tag, um einen Abschnitt innerhalb der HTML -Seite zu erstellen. Dieses „DIV“ -Tag wird mit der "A" -Klasse für die Differenzierung während des Stylings angegeben. Innerhalb dieses Abschnitts haben wir 3 weitere „DIV“ -Aremente, die hier verwendet werden.
Alle drei Div-Abschnitte werden mit drei verschiedenen Klassen angegeben-Float-Links, Float-Right und Float-None. Nach dem Schließen dieser drei Abschnitte „Div“ schließen wir auch den Hauptabschnitt „Div“. Auf die Schließung des Hauptabschnitts der DIV folgt das „Körper“ -Tag dieser HTML. Der Körper und seine Elemente sind jetzt vollständig. Damit einige Abschnitte nach rechts oder links ziehen, müssen wir sie entsprechend stylen. Somit verwenden wir innerhalb des Style -Tags des HTML.
Außerdem ist dieser Hauptabschnitt 400 Pixel in Breite und Höhe mit einem festen Rand von 3 Pixel in brauner Farbe. Danach verwenden wir die Klassen Float-Links-, Float-Right- und Float-None. Die Float -Eigenschaft wird für den ersten inneren Div -Abschnitt verwendet, um sie genau rechts von der HTML -Seite zu ziehen. Außerdem enthält dieser Abschnitt 100-Pixel-Breite, 120 Pixelhöhe und einen gepunkteten Rand von 3px in fester blauer Farbe. Das zweite innere „Div“ ist auf relativ positioniert und links von der HTML -Seite mit der Float -Eigenschaft gezogen. Es hat 200px -Breite, 120px -Höhe, wobei der 3px feste grüne Rand. Der letzte innere Abschnitt enthält eine absolute Position ohne angegebene Pull -Eigenschaft. Außerdem hat es 3px fester brauner Rand, 100px -Breite und 100px -Höhe. Dieser Code kann über den Visual Studio -Code im Chrome -Browser verwendet werden, um das Styling zu sehen.
Nachdem wir es im Chrom -Browser ausführen, erhalten wir die folgende Ausgabe. Der Hauptabschnitt Div wird mit einem soliden roten Rand angezeigt, und seine Position ist relativ zur HTML -Seite. Während der blau gefärbte Div-Abschnitt des gepunkteten Randes mit der Verwendung der Eigenschaft „Float“ in den CSS dieses Code nach rechts gezogen wird, wie im Bild gezeigt. Der grün gefärbte Div-Abschnitt wird mit der Eigenschaft "Float" nach links gezogen und ist relativ zur HTML-Seite. Die Position des braunen Abschnitts „Div“ wird als relativ angegeben und im Bild angezeigt.
Beispiel 02:
Beginnen wir mit einem weiteren Beispiel für die Verwendung der Float -Eigenschaft von CSS, um die Elemente des HTML nach rechts oder links zu ziehen. Dieser Code beginnt mit demselben HTML -Tag, das dem Tag "Kopf" folgt, der den Titel für diese HTML -Seite enthält, i.e. "CSS ziehen nach rechts". Für das Hinzufügen eines Titels für diese Seite verwenden wir das Titel -Tag. Wir müssen uns zuerst den Körperabschnitt unseres HTML -Skripts gut ansehen. Wir fügen den Körper der HTML -Seite mit dem "H1" -Metag "H1" hinzu, i.e. große Überschrift.
Danach probieren wir in diesem HTML -Code ein "Abschnitt" -Tag aus. Mit diesem Abschnitts -Tag wird ein Abschnitt im Körper der HTML -Seite erstellt. Innerhalb dieses Abschnitts verwenden wir drei neue „DIV“ -Aremente und ein Absatzelement. Beide ersten DIV-Tags verwenden dieselbe Klasse "linkes Pull", während das dritte Div-Tag in seinem Eröffnungs-Tag eine andere Klasse „Rechts-Pull“ verwendet. Die ersten beiden DIV -Tags enthalten einfache Texte darin, während das dritte Div -Tag ein Bild „IMG“ enthält, um das Bild in diesem Div -Abschnitt hinzuzufügen. Die Quelle dieses Bildes ist unser lokales System und es befindet sich im JPG -Format. Der Absatz enthält auch eine einfache Textzeile darin.
Nach dem Ende aller 3 Div -Tags und des Absatz -Tags endete unser Abschnitts -Tag hier mit seinem Schließen. Der Körper dieser HTML -Seite ist jetzt abgeschlossen. Schließen Sie das "Körper" -Tag. Innerhalb des Style -Tags dieses HTML -Code für das Styling geben wir das Element „Abschnitt“ an, um seine inneren Elemente zusammen zu stylen. Diese Abschnittsgröße wird durch das Format „Border-Box“ definiert und enthält den gepunkteten 5-Pixel-Rand um ihn herum. Die Breite dieses Abschnitts beträgt 50 Prozent, während er über die Eigenschaft „Float“ nach links gezogen wird. Die „Div“ -Elemente sind mit 5px Margin, 200px -Breite und 150px -Höhe für alle gestaltet. Die DIV-Elemente, die die Klasse „linke Pull“ enthalten.
Während die Divelelemente mit der Klasse „Right-Pull“ unter Verwendung der Eigenschaft „Float“ nach rechts gezogen werden und der Hintergrund auf nahezu himmelblaue Farbe eingestellt ist. Unser Code ist abgeschlossen und ist für die Verwendung im Visual Studio -Code über das Menü "Ausführen" nach der Option "Debugging" ausführen.
Die Ausgabe für diesen Code zeigt die einfache Überschrift und einen neuen gepunkteten Abschnitt, der auf der HTML -Seite generiert wird. Dieser Abschnitt enthält drei verschiedene Div -Abschnitte darin. Die ersten beiden Div -Abschnitte werden mit der rosa Hintergrundfarbe von Tee Rosa gezogen. Während der dritte Div -Abschnitt ein Bild enthält, das rechts neben dieser HTML -Seite gezogen wurde.
Abschluss
Wir haben die Notwendigkeit und die Verwendung des Ziehens der Elemente in der HTML -Seite in unserem Einführungsabsatz besprochen. Dieser Artikel zeigt eine sehr klare Demonstration des Ziehens der CSS -Elemente nach links, rechts oder keine über die CSS -Eigenschaft „Float“. Es wird in allen Beispielen verwendet, um diese Elemente mit der Verwendung von Klassen in den Div -Abschnitten in eine bestimmte Richtung zu ziehen. Alle in diesem Artikel behandelten Beispiele sind für jeden CSS -Benutzer Anfänger und Experten recht einfach und leicht zu verstehen.