Bagaimanakah Saya Boleh Menyusun Semula Elemen Sekat dalam CSS Sambil Mengekalkan Kesan Susunannya?

Menyusun Semula Elemen Sekat Menggunakan CSS

Dalam pembangunan web, mungkin perlu menyusun semula susunan elemen dalam halaman web. Ini boleh dicapai menggunakan CSS, tanpa menggunakan kaedah yang menyusahkan seperti position: absolute. Walau bagaimanapun, mengekalkan kefungsian paparan: sifat blok memerlukan pertimbangan.

Pernyataan Masalah:

Pertimbangkan kod HTML dengan tiga elemen blok (Blok A, Blok B dan Blok C) disusun secara menegak. Matlamatnya adalah untuk menukar susunan blok ini menggunakan CSS sahaja, sambil mengekalkan kesan tolak ke bawah paparan: blok.

Coretan kod:

<div>
<p><strong>Penyelesaian Menggunakan CSS:</strong></p>
<p>Pertanyaan media CSS menyediakan keupayaan untuk mengubah suai tingkah laku elemen berdasarkan pada saiz skrin. Dalam kes ini, kami boleh menggunakan sifat pesanan untuk menyusun semula elemen:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

Dengan menetapkan nilai pesanan, kami memanipulasi susunan paparan elemen tanpa mengubah kedudukannya dalam kod sumber. Lebih rendah nilai pesanan, lebih awal elemen muncul.

Contoh:

  
    <title>Block Reordering</title>
    <style>
      @media only screen and (max-width: 480px) {
        #parent {
          display: flex;
          flex-flow: column;
        }
        #a {
          order: 2;
        }
        #c {
          order: 1;
        }
        #b {
          order: 3;
        }
      }
    </style>
  
  
    <div><p>Dalam contoh ini, apabila lebar tetingkap penyemak imbas kurang daripada atau sama dengan 480px, susunan blok berubah kepada: Blok C, Blok A, Blok B. Ini mengekalkan paparan: kesan tolak blok untuk pelbagai saiz skrin.</p></div>