Bagaimanakah Saya Boleh Mengalih Keluar Bekas DIV Sambil Menyimpan Kandungannya?

Bolehkah Anda Mengalih keluar DIV Sambil Memelihara Elemennya?

Soalan:

Anda ada div yang mengandungi berbilang elemen. Anda memerlukan elemen tersebut untuk muncul di luar div bekas mereka apabila dilihat pada skrin yang lebih kecil. Pada masa ini, anda sedang menduplikasi HTML dan menyembunyikan satu versi berdasarkan saiz port pandangan, yang bukan penyelesaian yang ideal. Adakah terdapat cara yang lebih baik untuk mencapai keputusan ini?

Jawapan:

Ya, anda boleh menggunakan paparan: kandungan; harta untuk mencapai kesan yang anda inginkan.

Paparan: kandungan; harta ialah harta yang lebih baharu yang menyebabkan anak unsur kelihatan seolah-olah mereka adalah anak langsung kepada induk unsur tersebut. Dalam erti kata lain, ia mengabaikan elemen itu sendiri semasa membuat rendering. Ini boleh berguna dalam kes seperti anda, di mana anda ingin menyimpan elemen tertentu bersama-sama untuk tujuan penggayaan tetapi mengalih keluar bekas daripada aliran dokumen.

Contoh:

Inilah contoh bagaimana anda boleh menggunakan paparan: kandungan; untuk mengalih keluar satu div tetapi menyimpan elemennya di luarnya:

.container {
  display: flex;
}

.one {
  display: contents;
}

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

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

Dalam contoh ini, div bekas akan menyusun anak-anaknya dalam satu baris, dan elemen p dalam satu div akan memesan sendiri mengikut harta pesanan. Elemen p pertama akan muncul selepas elemen p kedua, walaupun ia dikumpulkan secara visual dalam satu div.

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