X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <div>

Das Tag <div> ist ein leerer Container, der eine Abteilung oder einen Abschnitt definiert. Es hat keinen Einfluss auf den Inhalt oder das Layout und wird verwendet, um HTML-Elemente, die mit CSS gestylt oder mit Skripten bearbeitet werden sollen, zu gruppieren.

Wir empfehlen Ihnen, das Tag <div> nur dann zu verwenden, wenn keine anderen semantischen Elemente in HTML5 eingeführt werden (z. B. <nav>, <main> oder <article>).

Das Tag <div> ist ein Block-Level-Element, so wird ein Zeilenumbruch vor und nach ihm gesetzt.

Sie können jedes HTML-Element innerhalb des Tages <div> einschließlich eines weiteren Tages <div> platzieren.

Das Tag <div> kann NICHT innerhalb des Tages <p> platziert werden, weil der Absatz an der Stelle unterbrochen wird, an der das Tag <div> platziert wird.

Um die Stile innerhalb eines Absatzes anzuwenden, verwenden Sie das Tag <span>, das mit den Inline-Elementen verwendet wird.

Syntax

Das Tag <div> wird gepaart verwendet. Der Inhalt muss zwischen den Start- (<div>) und Endtags (</div>) geschrieben werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Das Tag &lt;div&gt; </title>
  </head>
  <body>
    <h1> Das Tag &lt;div&gt; </h1>
    <div style="background-color:#8ebf42">
      <p>Wir verwenden das Tag &lt;div&gt; um zwei Absätze zu gruppieren, um dem Text einen Hintergrund zu geben und die Farbe zum 
        <span style="color:#1c87c9">Wort</span> durch das Tag &lt;span&gt; hinzuzufügen.</p>
      <p> Achten Sie darauf, dass das Tag &lt;div&gt; ein Block-Level-Element ist, also ein Zeilenumbruch vor und nach dem gesetzt werden muss.</p>
    </div>
  </body>
</html>

Ergebnis

Durch das Tag <div> positionierte Blöcke

Wenn wir Layouts erstellen, haben wir mit mehreren Blöcken, die durch das Tag <div> definiert sind, zu tun. Die Positionierung dieser Blöcke steht im Mittelpunkt des Layouts: Die Platzierung der Elemente an den richtigen relativen Positionen über alle Bildschirmgrößen hinweg ist eine der wichtigsten Aufgaben.

Abhängig vom Inhalt und den Zielen der Seite können wir verschiedene Techniken (oder deren Kombinationen) verwenden, um den Ort jedes Blocks zu bestimmen. Lassen Sie uns mehr über diese Techniken erfahren.

Flexbox

In modernen Webseiten werden Float-basierte Layouts durch Flexbox ersetzt. Die Grundidee hinter Flexbox ist, dass Sie mit ihr die Ausrichtung, Richtung, Reihenfolge und Größe der Artikel im Container steuern können.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        align-items: center; /* Verwenden Sie einen anderen Wert, um das Ergebnis zu sehen. */
        width: 300px;
        height: 300px;
        background-color: #1c87c9;
      }
      .flex-container > div {
        width: 120px;
        padding: 5px 0;
        margin: 5px;
        background-color: lightgrey;
        text-align: center;
        font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Ergebnis

CSS-Float-Eigenschaft

CSS float Eigenschaft, oder "floats" erlaubt, die Elemente nebeneinander oder getrennt voneinander darzustellen, wodurch wir verschiedene Arten von Layouts erstellen können, einschließlich mehrspaltiger Seiten, Sidebars, Grids usw.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .content {
        overflow: auto;
        border: 3px solid #666666;
      }
      .content div {
        padding: 10px;
      }
      .content a {
        color: darkblue;
      }
      .blue {
        float: right;
        background: #1c87c9;
      }
      .green {
        float: left;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
        <ul>
          <li>Listeneintrag 1</li>
          <li>Listeneintrag 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <ol>
          <li>Listeneintrag 1</li>
          <li>Listeneintrag 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Ergebnis

Negative Margins

Negative Margin kann sowohl auf statische als auch auf schwebende Elemente angewendet werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .content div {
        padding: 2%;
      }
      .content a {
        color: darkblue;
      }
      .main-content {
        width: 30%;
        margin-left: 32%;
      }
      .blue {
        width: 25%;
        margin-top: -10%;
        background: #1c87c9;
      }
      .green {
        width: 20%;
        margin: -35% auto auto 70%;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <a href="#">Das ist ein Absatz innerhalb des Tages div.</a>
      </div>
      <div class="blue">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
        <ul>
          <li>Listeneintrag 1</li>
          <li>Listeneintrag 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <ol>
          <li>Listeneintrag 1</li>
          <li>Listeneintrag 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Ergebnis

Relative+absolute Positionierung

Wenn Sie div zu einem bestimmten Element relativ positionieren möchten, können Sie eine Kombination aus Position: position: relative und position: absolute. verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .content {
        position: relative;
        height: 400px;
        border: 1px solid #666666;
      }
      .content div {
        position: absolute;
        padding: 10px;
      }
      .content a {
        color: darkblue;
      }
      .blue {
        right: 20px;
        bottom: 0;
        background: #1c87c9;
      }
      .green {
        top: 10px;
        left: 15px;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <a href="#">Das ist ein Hyperlink innerhalb des Tages div.</a>
        <ul>
          <li>Irgendein Listeneintrag.</li>
          <li>Irgendein Listeneintrag.</li>
        </ul>
      </div>
      <div class="green">
        <p>Das ist ein Absatz innerhalb des Tages div.</p>
        <ol>
          <li>Irgendein Listeneintrag.</li>
          <li>Anderer Listeneintrag.</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Ergebnis

Beachten Sie bitte, dass position: relative keinen Einfluss auf die Positionierung der Elemente im normalen Fluss hat, es sei denn, Sie fügen Offsets hinzu.

Attribute

Attribut Wert Beschreibung
align left
right
center
justify

Es wurde verwendet, um den Inhalt innerhalb des Tags <div> anzupassen.
Dieses Attribut wird in HTML5 nicht unterstützt. Stattdessen können Sie die CSS-Eigenschaft text-align verwenden, um Attribute anzupassen.

Das Tag <div> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support



Finden Sie das nützlich?

Ähnliche Artikel