Bagaimanakah Saya Boleh Menyusun Semula Elemen Sekat HTML Menggunakan CSS sahaja?

CSS untuk Menyusun Semula Elemen Blok

Mencari kaedah untuk menyusun semula susunan elemen blok HTML semata-mata melalui CSS boleh menjadi satu cabaran. Soalan ini menangani isu ini, bertujuan untuk menukar susunan tiga blok tanpa menjejaskan kelakuan paparannya sebagai elemen blok.

Penyelesaian CSS

Penyelesaian yang disediakan menggunakan CSS flexbox . Dengan menetapkan elemen induk kepada lajur display:flex dan flex-flow:, elemen menjadi disusun secara menegak. Kemudian, menggunakan sifat pesanan, susunan elemen kanak-kanak boleh disesuaikan. Contohnya, #a {order:2;} akan mengalihkan elemen dengan id="a" ke kedudukan kedua.

Pelaksanaan

Untuk melaksanakan penyelesaian ini, mula-mula tetapkan elemen induk untuk dipaparkan sebagai bekas fleksibel:

#parent { display: flex; flex-flow: column; }

Seterusnya, gunakan sifat pesanan untuk menukar susunan anak elemen:

#a { order: 2; }
#b { order: 3; }
#c { order: 1; }

Pertimbangan Pertanyaan Media

Untuk memenuhi saiz skrin yang berbeza, pertanyaan media boleh digunakan untuk mengawal reka letak. Sebagai contoh, peraturan berikut akan menukar susunan blok untuk skrin dengan lebar maksimum 300px:

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

Contoh

Berikut ialah contoh ringkas yang menunjukkan konsep:

<div><p>Laraskan lebar tetingkap penyemak imbas untuk melihat bagaimana susunan daripada elemen div berubah.</p></div>

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