CSS-Float-Nutzung für den Betrieb von DIV

Float-Attribut im CSS-Stil wird verwendet, um das schwebende Layout von Beschriftungsobjekten festzulegen (z. B.

Beschriftungsfeld, Beschriftung, Beschriftung, Beschriftung und andere HTML-Beschriftungen). ), Floating ist das, was wir Beschriftungsobjekte nennen, die nach links schweben (float:left) und nach rechts schweben (float:right).

Was bedeutet Float?

float bedeutet schwebend, und ins Chinesische übersetzt bedeutet es auch schwebend. Lesen Sie das Float-Handbuch im entsprechenden CSS-Handbuch, um grundlegende Informationen zu Float zu erhalten.

Die Rolle von Float

Die Definition von Float (Floating) über CSS ermöglicht es dem Ebenenblock im Div-Stil, nach links oder rechts zu schweben (anzulehnen).

Float-Floating-Tutorial-Verzeichnis

Float-Syntax

Float-Anwendung und -Verwendung

Float-Floating-Groß-/Kleinschreibung

CSS-Floating für andere Anwendungen

CSS-Float-Zusammenfassung

Float-Syntax

Auf Float folgen häufig die Attributwerte left, right, none

Float:none Verwenden Sie kein Float

Float: left Float nach links

Float:right Float nach rechts

Float-Syntax:

float: none | left |right

Parameterwert:

keine: Das Objekt schwebt nicht

links: Das Objekt schwebt auf der linken Seite

rechts: Das Objekt schwebt auf der rechten Seite

Als nächstes erklären wir Float anhand eines Div+CSS-Beispiels. Anwendungstipps.

Float-Anwendung und -Verwendung

Float wird verwendet, um den linken und rechten Floating-Stil von Objekten festzulegen. Es kann das erreichen, was wir brauchen, um DIV, SPAN und andere Beschriftungen nach links und rechts schweben zu lassen.

Einfache Syntax zur Verwendung von

div{float:left} /* CSS-Kommentar: Setzt das Div-Objekt so, dass es nach links (links) schwebt */

div{float :right} / * CSS-Kommentar: Stellen Sie das Div-Objekt so ein, dass es nach rechts (rechts) schwebt rechts und eines links. Um den CSS-Floating-Layout-Effekt intuitiv zu sehen, legen wir eine bestimmte Breite, Höhe und einen bestimmten Rand für die beiden Boxen fest.

1. Haupt-HTML-Codeausschnitt:

Layout auf der linken Seite Floating

Layout nach rechts schwebend

< div>

2 { width:400px;padding:10px;border:1px solid #F00}

.div _left{ float:left;width:150px;border:1px solid #00F;height:50px}

.div _right{ float:right;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both}

Die Float-Verwendung der CSS-Operation DIV ist wie folgt Es gibt so viele, Freunde, die sie brauchen, können sie speichern, und achten Sie bitte weiterhin auf andere Updates auf dieser Website.

Verwandte Lektüre:

So legen Sie die minimale und maximale Breite von CSS fest

Welche Funktion hat der CSS-Rand?

Wie man in CSS3 abgerundete Ecken erstellt

Das obige ist der detaillierte Inhalt vonCSS-Float-Nutzung für den Betrieb von DIV. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

css float

Quelle：php.cn

Vorheriger Artikel：So schreiben Sie Ankertext in HTML Nächster Artikel：So verwenden Sie CSS, um den Z-Index eines Divs zu manipulieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Einführung in die neueste Version der PHP Programmer Toolbox v1.0
  2018-06-11 11:57:34
• So gehen Sie mit einem Routing-Fehler von vue.js um
  2018-06-15 15:55:18
• So verwenden Sie js zum Parsen der Datenbank (mit Code)
  2018-06-15 15:49:00
• So verwenden Sie js, um DOM-Ereignisse im Projekt zu binden
  2018-06-15 15:46:15
• So bedienen Sie JS-Strings und Sonderzeichen
  2018-06-15 15:42:38
• So verwenden Sie die einzelnen Methoden in jQuery in einem Projekt
  2018-06-15 15:40:34
• So verwenden Sie JQuery zum Hochladen von Dateien
  2018-06-15 15:39:32
• So verwenden Sie den JS-Prototyp und die Prototypenkette
  2018-06-15 15:37:14
• Angular CLI+Angular 5 praktische Projektdemonstration
  2018-06-15 15:34:21
• Knotenelemente mit jQuery ersetzen (Code im Anhang)
  2018-06-15 15:22:51

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1638

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

1794

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1530

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1439

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1486

verwandte Themen

Mehr>

• CSS
• CSS-zentriert
• So fügen Sie Bilder in CSS ein
• CSS außerhalb der Anzeige ...
• CSS-Schriftfarbe
• Was ist CSS?
• Wie schreibe ich ein Dreieck in CSS?
• CSS-Textfarbe festlegen