Comment puis-je supprimer un élément Div tout en gardant son contenu intact ?

Éliminer une div tout en préservant ses éléments

Pour déplacer des éléments de l'intérieur d'une div vers l'extérieur de celle-ci pour différentes tailles d'écran, une alternative à répéter du HTML et masquer des éléments en fonction des fenêtres d'affichage est l'utilisation de affichage:contenu;.

Affichage:contenu; est idéal dans des situations comme celles-ci. Cela fait apparaître les enfants d'un élément comme des enfants directs de son parent, sans tenir compte de l'élément lui-même. Ceci est utile lors de l'utilisation d'une grille CSS ou d'autres techniques de mise en page où l'élément wrapper doit être ignoré.

Exemple de mise en œuvre :

<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;
}

Dans cet exemple, le div « un » est configuré pour afficher ses enfants en tant qu’enfants directs du div « conteneur ». La propriété order est utilisée pour réorganiser les paragraphes dans le div « un » sur les appareils mobiles.

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!