Bagaimanakah Saya Boleh Menyusun Semula Elemen Sekat Hanya Menggunakan CSS?

Menukar Susunan Elemen Blok dengan CSS

Dalam senario ini, kami diberi kod HTML di mana tiga elemen blok disusun secara menegak: Blok A , Blok B dan Blok C. Cabarannya ialah menyusun semula elemen ini dalam susunan tertentu menggunakan CSS sahaja, sambil mengekalkan paparan:blok property.

Menggunakan pertanyaan media CSS, kami boleh menggunakan sifat pesanan secara terpilih pada elemen berdasarkan lebar skrin. Sebagai contoh, mempertimbangkan senario di mana iklan aplikasi iPhone harus dipaparkan terlebih dahulu pada peranti mudah alih, kami boleh melaksanakan perkara berikut:

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1; /* Move Block C to the top */
  }
}

Sekarang, apabila lebar skrin kurang daripada atau sama dengan 480px, Blok C akan diberikan di atas Blok A dan Blok B. Ini mencapai penyusunan semula yang diingini tanpa menjejaskan elemen blok tingkah laku.

Berikut ialah contoh yang lebih terperinci menggunakan CSS moden:

<div>

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a {
    order: 2;
  }
  #c {
    order: 1;
  }
  #b {
    order: 3;
  }
}

Dalam contoh ini, apabila lebar skrin dikurangkan kepada 300px atau kurang, elemen akan disusun semula sebagai : Blok C, Blok A, Blok B. Susun atur kotak fleksibel memastikan elemen kekal seperti blok, disusun secara menegak dan menghormati ketinggian semula jadi dan lebar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Elemen Sekat Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!