Bagaimanakah Saya Boleh Mengalih Keluar Elemen Div Sambil Mengekalkan Kandungannya Utuh?

Menghapuskan Div Sambil Memelihara Elemennya

Untuk mengalihkan elemen dari dalam div ke luarnya untuk saiz skrin yang berbeza-beza, alternatif kepada mengulang HTML dan menyembunyikan elemen berdasarkan viewports adalah penggunaan paparan:kandungan;.

Paparan:kandungan; adalah ideal dalam situasi seperti ini. Ia menyebabkan anak unsur kelihatan sebagai anak langsung kepada ibu bapanya, tanpa menghiraukan unsur itu sendiri. Ini bernilai apabila menggunakan grid CSS atau teknik reka letak lain yang mana elemen pembalut harus diabaikan.

Contoh Pelaksanaan:

<div class="container">
  <div class="one">
    <p>Content 1</p>
    <p>Content 3</p>
  </div>

  <p>Content 2</p>
</div>

.container {
  display: flex;
}

.one {
  display: contents;
}

.one p:first-child {
  order: 2;
}

Dalam contoh ini, div "satu" ditetapkan untuk memaparkan anak-anaknya sebagai anak langsung div "bekas". Sifat pesanan digunakan untuk menyusun semula perenggan dalam div "satu" apabila menggunakan peranti mudah alih.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalih Keluar Elemen Div Sambil Mengekalkan Kandungannya Utuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!