Comment « display : contents » peut-il aider à gérer des mises en page réactives tout en préservant le contenu des éléments ?

Supprimer un DIV tout en préservant son contenu pour des mises en page réactives

Dans la conception Web, il est parfois nécessaire de réorganiser les éléments d'une mise en page lorsqu'ils sont affichés sur différentes tailles d'écran. Souvent, cela implique de cacher certains éléments dans un div lorsqu'ils ne sont pas nécessaires dans une fenêtre plus petite. Cependant, une approche plus polyvalente est disponible en utilisant la propriété display:contents.

La propriété CSS display:contents amène les enfants d'un élément à se comporter comme s'ils étaient des enfants directs du parent de l'élément, ignorant essentiellement l'existence de l'élément lui-même. Cette propriété est particulièrement utile lorsque vous travaillez avec des mises en page flexbox ou des techniques similaires.

Par exemple, considérons un scénario dans lequel vous avez des éléments HTML avec la structure suivante :

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

Dans une vue de bureau, vous souhaitez que le paragraphe "Contenu 1" soit affiché dans le div ".one". Cependant, dans une vue mobile, vous devez que les deux paragraphes apparaissent en dehors du div ".one".

Pour y parvenir en utilisant display:contents, vous pouvez ajouter les styles suivants :

.container {
  display: flex;
}

.one {
  display: contents;
}

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

En définissant display:contents; sur le div ".one", nous ignorons essentiellement sa présence lors de la disposition des éléments. Les enfants du div ".one" se comportent désormais comme s'ils étaient des enfants directs du div ".container".

De plus, en définissant order: 2; sur le premier paragraphe du div ".one", nous contrôlons sa position dans la disposition flexbox. Cela nous permet de positionner « Contenu 1 » après « Contenu 2 » dans la vue mobile.

En utilisant display:contents;, vous pouvez obtenir des mises en page réactives complexes tout en préservant la structure des éléments d'origine. Cette approche évite de dupliquer le code HTML ou de masquer des éléments, ce qui permet d'obtenir une solution plus propre et plus efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!