Ein HTML-
Je nachdem, warum Sie ein div unterbrechen möchten, ziehen Sie auch ein -Tag in Betracht. Es ist ein Element auf Inline-Ebene und wird nicht zur nächsten Zeile umgebrochen, es sei denn, sein Standardverhalten wird geändert.
Um diese Beispiele für alle Arten von Computerbenutzern benutzerfreundlicher und verständlicher zu machen, verwenden wir das style-Attribut im div. Wenn Sie beabsichtigen, eines dieser Beispiele auf mehreren Seiten zu verwenden, empfehlen wir dringend, eine cachefähige CSS-Datei mit den Stileinstellungen in der Datei zu erstellen.
Unten zeigen wir die Divs in verschiedenen Farben, um zu veranschaulichen, wie viel Platz sie einnehmen, wo sie auf dem Bildschirm platziert sind.
Standard-
-Verhalten
Unten sehen Sie ein Beispiel für das standardmäßige div-Verhalten des Blockelements Div eins, das die erste Zeile seines umgebenden Elements belegt, gefolgt vom zweiten Div zwei.
Div eins
Div zwei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2;">Div two</div>
Legen Sie die Größe fest und machen Sie sie inline
Da es sich um Blockelemente handelt, bleibt beim Reduzieren der Größe von Div eins, um Platz für das andere Div zu schaffen, Platz neben Div eins und Div zwei unter Div eins. Um das Div nach oben in die nächste Zeile zu verschieben, müssen beide Divs die Inline-Block-Anzeigeeinstellung haben, wie unten gezeigt.
Div eins
Div zwei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC; width: 100px; display: inline-block;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
Erstellen eines dreispaltigen div
Unten sind ein paar verschiedene Beispiele für ein dreispaltiges div. Erstens folgt das folgende dreispaltige div der gleichen Idee wie die obigen Beispiele, außer dass es ein div hinzufügt.
Div eins
Div zwei
Div drei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC; display: inline-block;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
<div style="padding: 50px; background-color: #98AFC7; display: inline-block; margin-bottom: 2em;">Div three</div>
Wenn Sie möchten, dass die Divs 100 % des enthaltenden Elements einnehmen, wird es natürlich etwas kniffliger. Unten sehen Sie ein Beispiel dafür, wie Sie drei Divs nebeneinander erstellen können, die 100 % des Elements einnehmen. Im Beispiel unten lassen wir nicht alle Divs mit Inline-Block auf derselben Zeile, sondern schweben das linke und das rechte Div.
Div eins
Div drei
HTML Quelltext
<div style="background-color:#BCC6CC;float: left;width: 200px;padding: 50px">Div One</div>
<div style="background-color:#98AFC7;float: right;padding: 50px">DIV THREE</div>
<div style="background-color:#E5E4E2;float: none;overflow: hidden;padding: 50px">Div Two</div>
Tipp
Obwohl das obige Beispiel einer Drei-Div-Spalte responsiv ist, können auch zusätzliche Anpassungen hinzugefügt werden, z. B. das Ausblenden von Div drei und das Anpassen der Breite.
Unten sehen Sie ein Beispiel für das standardmäßige div-Verhalten des Blockelements Div eins, das die erste Zeile seines umgebenden Elements belegt, gefolgt vom zweiten Div zwei.
Div eins
Div zwei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2;">Div two</div>
Legen Sie die Größe fest und machen Sie sie inline
Da es sich um Blockelemente handelt, bleibt beim Reduzieren der Größe von Div eins, um Platz für das andere Div zu schaffen, Platz neben Div eins und Div zwei unter Div eins. Um das Div nach oben in die nächste Zeile zu verschieben, müssen beide Divs die Inline-Block-Anzeigeeinstellung haben, wie unten gezeigt.
Div eins
Div zwei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC; width: 100px; display: inline-block;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
Erstellen eines dreispaltigen div
Unten sind ein paar verschiedene Beispiele für ein dreispaltiges div. Erstens folgt das folgende dreispaltige div der gleichen Idee wie die obigen Beispiele, außer dass es ein div hinzufügt.
Div eins
Div zwei
Div drei
HTML Quelltext
<div style="padding: 50px; background-color: #BCC6CC; display: inline-block;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div> <div style="padding: 50px; background-color: #98AFC7; display: inline-block; margin-bottom: 2em;">Div three</div>
Wenn Sie möchten, dass die Divs 100 % des enthaltenden Elements einnehmen, wird es natürlich etwas kniffliger. Unten sehen Sie ein Beispiel dafür, wie Sie drei Divs nebeneinander erstellen können, die 100 % des Elements einnehmen. Im Beispiel unten lassen wir nicht alle Divs mit Inline-Block auf derselben Zeile, sondern schweben das linke und das rechte Div.
Div eins
Div drei
HTML Quelltext
<div style="background-color:#BCC6CC;float: left;width: 200px;padding: 50px">Div One</div> <div style="background-color:#98AFC7;float: right;padding: 50px">DIV THREE</div> <div style="background-color:#E5E4E2;float: none;overflow: hidden;padding: 50px">Div Two</div>
Obwohl das obige Beispiel einer Drei-Div-Spalte responsiv ist, können auch zusätzliche Anpassungen hinzugefügt werden, z. B. das Ausblenden von Div drei und das Anpassen der Breite.
