Bagaimana untuk Mencapai Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Ditindan pada Mudah Alih?

Satu Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Ditindan pada Mudah Alih

Masalah:

Mencapai reka letak di mana tiga div disusun pada peranti mudah alih tetapi muncul bersebelahan pada skrin yang lebih besar (desktop).

Penyelesaian:

Penyelesaian melibatkan melumpuhkan gelagat flexbox pada skrin yang lebih luas dan menggunakan apungan untuk membolehkan div yang lebih pendek (B dan C) menjajarkan ke kanan secara semula jadi. Pada mudah alih, sifat pesanan flexbox digunakan untuk menyusun semula div seperti berikut:

• Desktop: A-B-C
• Mudah alih: B-A-C

Kod :

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Div Tinggi Bersebelahan Dua Div Lebih Pendek pada Desktop dan Ditindan pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!