Tipp: Je nachdem, warum Sie ein div aufheben möchten, sollten Sie auch ein Tag in Betracht ziehen, das ein Inline-Element ist und nicht in die nächste Zeile übergeht, wenn das Standardverhalten nicht geändert wird.
Hinweis: Damit diese Beispiele für alle Arten von Computerbenutzern benutzerfreundlicher und verständlicher werden, verwenden wir das style-Attribut im div. Wenn Sie eines dieser Beispiele auf mehreren Seiten verwenden möchten, empfehlen wir dringend, eine zwischengespeicherte CSS-Datei mit den Stileinstellungen in der Datei zu erstellen.
In den folgenden Beispielen werden die Divs in verschiedenen Farben dargestellt, um zu veranschaulichen, wie viel Abstand das Div einnimmt und wo das Div auf dem Bildschirm platziert wird.
Standardverhalten
Nachfolgend finden Sie ein Beispiel für das standardmäßige div-Verhalten des Blockelements Div one, das die erste Zeile seines übergeordneten Elements einnimmt, gefolgt von der zweiten Div 2 .
Div eins
Div zwei
Div 1 Div 2
Selbst wenn Sie die Größe einer Div 1 verkleinern würden, um Platz für das andere Div zu schaffen, haben Sie als Blockelemente Platz neben Div 1 und Div 2 unterhalb von Div 1 . Um das div in die nächste Zeile zu verschieben, müssen beide div die Inline-Block-Anzeigeeinstellung haben, wie unten gezeigt.
Div eins
Div zwei
Div 1 Div 2
Nachfolgend einige Beispiele für ein dreispaltiges div. Zunächst folgt die div-Spalte mit den drei Spalten der gleichen Idee wie in den obigen Beispielen, nur dass hier ein div hinzugefügt wird.
Div eins
Div zwei
Div drei
Div 1 Div 2 Div 3
Wenn Sie möchten, dass die divs 100% des enthaltenden Elements einnehmen, wird es natürlich etwas komplizierter. Im Folgenden finden Sie ein Beispiel, wie Sie drei Divs nebeneinander erstellen können, die 100% des Elements einnehmen. Im folgenden Beispiel verschieben wir nicht alle Divs mit Inline-Block in derselben Zeile, sondern verschieben das linke und rechte Div.
Div eins
Div drei
Div zwei
Div One DIV DRE Div 2
Tipp: Das obige Beispiel einer Dreispalte mit drei Divisionen ist eine reaktionsschnelle zusätzliche Anpassung, z. B. das Ausblenden von Div 3 und das Anpassen der Breiten können ebenfalls zum Stil hinzugefügt werden.