Platzieren Sie HTML Div nebeneinander

1. Verwenden Sie die Eigenschaft float
2. Verwenden Sie die Eigenschaft flexbox
3. Verwenden Sie CSS-Raster

In diesem Beitrag werden viele Methoden zum Anzeigen von zwei div-Elementen nebeneinander in einem HTML-Dokument betrachtet.

Verwenden Sie die Eigenschaft float

Mit der CSS-Eigenschaft float können Text- und Inline-Elemente ein Element umfließen, das sich auf der linken oder rechten Seite seines Containers befindet. Das Element wird dennoch in den Fluss der Seite aufgenommen, auch wenn es nicht Teil des regulären Flusses ist.

Syntax:

float: $value;

Dieser Wert kann irgendetwas wie links, rechts, none, inline-start, inline-end usw. sein.

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<div class="float-parent">
  <div class="float-child">Float Child 1</div>
  <div class="float-child">Float Child 2</div>
</div>

.float-parent {
    padding: 20px;
}

.float-child {
    width: 45%;
    float: left;
    padding: 20px;
    border: 1px dotted black;
}

Im vorherigen Beispiel lassen wir jedes div schweben, um sie mit dem float-Attribut nebeneinander zu platzieren. Sie werden nebeneinander angezeigt, wenn ausreichend Platz vorhanden ist, da sie beide nach links schweben.

Wir haben zwei .float-child divs mit jeweils einer width von 45%, also passen sie.

Führen Sie die obige Codezeile in jedem mit HTML kompatiblen Browser aus. Es wird das folgende Ergebnis angezeigt.

Verwenden Sie die Eigenschaft flexbox

Ohne float oder positioning macht das Modul Flexible Box Layout die Entwicklung flexibler, responsiver Layout-Strukturen einfacher. Flexbox ist mobilfreundlich und reaktionsschnell, was es praktisch für die Gestaltung kleiner Layouts macht.

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
</div>

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

Im vorherigen Beispiel haben wir display: flex; auf dem übergeordneten div-Container unter Verwendung des Klassenelements .flex-parent von flexbox. Dadurch wird flexbox aktiviert.

Dann setzen wir flex: 1; in jedem .flex-child div-Element. Diese Zahl fungiert als Verhältnis zwischen den Breiten jedes Kind-Flex-Elements im Eltern-Flex-Element.

Sie teilen sich den verfügbaren Platz zu gleichen Teilen, da sie identisch sind. Wir haben zwei untergeordnete div-Komponenten; Daher nimmt jedes div 50% des Platzes ein.

Führen Sie die obige Codezeile in jedem mit HTML kompatiblen Browser aus. Es wird das folgende Ergebnis angezeigt.

Verwenden Sie CSS-Raster

Das CSS Grid-Layout zeichnet sich dadurch aus, dass es eine Seite in Hauptbereiche unterteilt und die Verbindung zwischen Komponenten eines auf HTML-Primitiven basierenden Steuerelements spezifiziert.

Eine wichtige Änderung bei grid ist, dass Sie zuerst auswählen, wie die Grid-Vorlage aussehen soll. Bezogen auf die Anzahl der Spalten und/oder Zeilen, die Sie in Ihrem Layout wünschen.

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<div class="grid-parent">
    <div class="grid-child">
        Grid Child 1
    </div>
    <div class="grid-child">
        Grid Child 2
    </div>
</div>

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

In diesem Fall möchten wir zwei Spalten mit gleicher Breite. Also verwenden wir das display: grid; -Eigenschaft, um grid im übergeordneten div-Element über das Klassenelement .grid-container zu aktivieren.

Der Parameter grid-template-columns wird dann verwendet, um die gewünschte Anzahl von Spalten in unserem Layout hinzuzufügen.

Wir setzen es auf 1fr 1fr, weil wir zwei gleich breite Spalten haben wollen. Dies weist den Browser an, ein zweispaltiges Layout mit einem Abstand von 1 fr = Brucheinheit zwischen den einzelnen Spalten zu erstellen.

Die flex: 1-Regel, die wir im flexbox-Ansatz verwendet haben, ist analog zur fr-Einheit, die ein Verhältnis von einer Spalte zur anderen darstellt. Jede Spalte nimmt den gleichen Platz ein, wenn die Spalten auf 1fr 1fr eingestellt sind.

Führen Sie die obige Codezeile in jedem mit HTML kompatiblen Browser aus. Es wird das folgende Ergebnis angezeigt.

Demo