Bagaimanakah Saya Boleh Mengalih Keluar Kehadiran Visual Elemen Div Sambil Mengekalkan Anak-Anaknya Utuh?

Mengalih keluar Elemen Div tanpa Mengalih Keluar Elemen Sendiri

Anda menghadapi cabaran untuk memaparkan elemen div di luar bekasnya untuk saiz skrin yang berbeza. Pada masa ini, anda sedang menduplikasi HTML dan menyembunyikannya berdasarkan port pandang, yang bukan pendekatan yang paling cekap.

Untuk menangani isu ini, pertimbangkan untuk menggunakan display:contents;. Sifat CSS ini membenarkan anak elemen kelihatan seolah-olah mereka adalah anak langsung ibu bapa, menyembunyikan elemen induk itu sendiri dengan berkesan.

Pelaksanaan:

Dalam senario khusus ini , gunakan paparan: kandungan; ke div yang mengandungi elemen yang anda ingin pisahkan. Contohnya:

.one {
  display: contents;
}

Ini akan menyebabkan elemen dalam .one muncul sebagai anak langsung .bekas. Anda kemudiannya boleh menggunakan perintah flexbox untuk mengawal susunan elemen ini innerhalb .container.

Contoh:

Berikut ialah coretan HTML yang dikemas kini dengan paparan: kandungan; harta yang digunakan:

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

Menggunakan paparan: kandungan; dengan cara ini membolehkan anda mengekalkan fleksibiliti reka letak HTML dan CSS tanpa menduplikasi kandungan atau bergantung pada penyelesaian JavaScript yang rumit.

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