So zeigen Sie zwei Divs nebeneinander an

Methoden sind: 1. Setzen Sie zwei div-Elemente auf das „float:left;“-Attribut. 2. Verwenden Sie das Flex-Layout von CSS, um Elemente einfach nebeneinander anzuzeigen . zeigen.

Um zwei Divs nebeneinander anzuzeigen, können Sie die folgenden Methoden verwenden:

Mit dem float-Attribut können Sie in CSS zwei div-Elemente auf das float:left;-Attribut setzen, damit sie nebeneinander angezeigt werden Seite an Seite. Der Beispielcode lautet wie folgt:

<style>
    .div1, .div2 {
        float: left;
        width: 50%; /* 两个div据父素宽度的一半 */
 }
</>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>

Flex-Layout verwenden: Mit dem Flex-Layout von CSS können Elemente problemlos nebeneinander angezeigt werden. Setzen Sie das Anzeigeattribut des übergeordneten Elements auf Flex und das Flex-Attribut des untergeordneten Elements auf 1, damit sie die Breite des übergeordneten Elements gleichmäßig belegen. Der Beispielcode lautet wie folgt:

<style>
    .container {
        display: flex;
    }
    .div1, .div2 {
        flex: 1;
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

Rasterlayout verwenden: Mithilfe des CSS-Rasterlayouts können auch Elemente nebeneinander angezeigt werden. Setzen Sie das Anzeigeattribut des übergeordneten Elements auf Raster und das Rasterspaltenattribut des untergeordneten Elements, um die Position des untergeordneten Elements im Raster zu steuern. Der Beispielcode lautet wie folgt:

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 将父元素分为两列 */
    }
    .div1 {
        grid-column: 1; /* 第一列 */
    }
    .div2 {
        grid-column: 2; /* 第二列 */
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

Die oben genannten sind drei häufig verwendete Methoden. Sie können je nach Situation die geeignete Methode auswählen, um zwei Divs nebeneinander anzuzeigen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie zwei Divs nebeneinander an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!