Bagaimana untuk memaparkan dua div sebelah menyebelah

Kaedahnya ialah: 1. Tetapkan dua elemen div kepada atribut "float:left;" 2. Gunakan susun atur fleksibel CSS untuk memaparkan elemen bersebelahan dengan mudah 3. Gunakan reka letak grid CSS; juga mungkin untuk memaparkan elemen bersebelahan.

Untuk memaparkan dua div sebelah menyebelah, anda boleh menggunakan kaedah berikut:

Gunakan pelampung atribut Dalam CSS, anda boleh menetapkan dua elemen div ke atribut float:left supaya ia muncul bersebelahan. Kod sampel adalah seperti berikut:

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

Gunakan reka letak fleksibel: Menggunakan reka letak fleksibel CSS boleh memaparkan elemen sebelah menyebelah dengan mudah. Tetapkan atribut paparan elemen induk kepada flex, dan tetapkan atribut flex elemen anak kepada 1, supaya ia menduduki lebar elemen induk secara sama rata. Kod sampel adalah seperti berikut:

<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>

Gunakan reka letak grid: Menggunakan reka letak grid CSS juga boleh memaparkan elemen sebelah menyebelah. Tetapkan atribut paparan elemen induk kepada grid dan tetapkan atribut lajur grid elemen anak untuk mengawal kedudukan elemen anak dalam grid. Kod sampel adalah seperti berikut:

<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>

Di atas adalah tiga kaedah yang biasa digunakan Anda boleh memilih kaedah yang sesuai mengikut situasi tertentu untuk mencapai paparan sebelah menyebelah dua div.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan dua div sebelah menyebelah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!