Bagaimanakah `display: contents` Boleh Membantu Mengurus Reka Letak Responsif Semasa Memelihara Kandungan Elemen?

Mengalih keluar DIV Sambil Memelihara Kandungannya untuk Reka Letak Responsif

Dalam reka bentuk web, kadangkala perlu menyusun semula elemen dalam reka letak apabila dilihat pada saiz skrin yang berbeza. Selalunya, ini melibatkan penyembunyian elemen tertentu dalam div apabila ia tidak diperlukan dalam ruang pandang yang lebih kecil. Walau bagaimanapun, pendekatan yang lebih serba boleh tersedia menggunakan sifat display:contents.

Sifat CSS display:contents menyebabkan anak-anak sesuatu elemen berkelakuan seolah-olah mereka adalah anak langsung kepada induk unsur tersebut, pada dasarnya mengabaikan kewujudan daripada unsur itu sendiri. Sifat ini amat berguna apabila bekerja dengan reka letak flexbox atau teknik yang serupa.

Sebagai contoh, pertimbangkan senario di mana anda mempunyai elemen HTML dengan struktur berikut:

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

Dalam paparan desktop, anda mahu perenggan "Kandungan 1" dipaparkan dalam div ".one". Walau bagaimanapun, dalam paparan mudah alih, anda memerlukan kedua-dua perenggan untuk muncul di luar div ".one".

Untuk mencapai ini menggunakan display:contents, anda boleh menambah gaya berikut:

.container {
  display: flex;
}

.one {
  display: contents;
}

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

Dengan menetapkan paparan:kandungan; pada div ".one", kita pada dasarnya mengabaikan kehadirannya apabila meletakkan elemen. Anak-anak div ".one" kini berkelakuan seolah-olah mereka adalah anak langsung div ".container".

Selain itu, dengan menetapkan susunan: 2; pada perenggan pertama dalam div ".one", kami mengawal kedudukannya dalam reka letak flexbox. Ini membolehkan kami meletakkan "Kandungan 1" selepas "Kandungan 2" dalam paparan mudah alih.

Dengan menggunakan display:contents;, anda boleh mencapai reka letak responsif yang kompleks sambil mengekalkan struktur elemen asal. Pendekatan ini mengelakkan penduaan kod HTML atau menyembunyikan elemen, menghasilkan penyelesaian yang lebih bersih dan cekap.

Atas ialah kandungan terperinci Bagaimanakah `display: contents` Boleh Membantu Mengurus Reka Letak Responsif Semasa Memelihara Kandungan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!