Comment puis-je échanger les positions DIV en utilisant uniquement CSS pour une conception réactive ?

Échangez les positions DIV avec CSS pour un design réactif

Dans le domaine du design réactif, où les mises en page des sites Web s'adaptent à diverses tailles d'écran, en réorganisant les La position des éléments est cruciale pour maintenir une expérience utilisateur harmonieuse. C'est là que CSS entre en jeu, proposant des solutions pour permuter les emplacements des divs sans modifier le HTML.

Au départ, la structure HTML semble simple :

<div>

Cependant, le but est d'inverser le div se positionne via CSS uniquement, rendant "second_div" comme premier élément.

L'idéal Solution

Les codeurs artistiques ont recommandé une approche ingénieuse présentée dans une discussion sous la question « Meilleure façon de déplacer un élément de haut en bas dans un design réactif."

Cette solution utilise CSS propriétés prenant en charge les navigateurs modernes. En tirant parti des techniques d'affichage combinées à l'ordre flexbox, les éléments peuvent être réorganisés sans perturber leurs hauteurs dynamiques :

@media (max-width: 30em) {

  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

Ce code CSS crée un div conteneur avec une disposition flexbox verticale. Dans ce conteneur, les propriétés d'ordre "first_div" et "second_div" sont affectées. En définissant un ordre plus élevé pour "second_div", il apparaît effectivement avant "first_div" dans la mise en page rendue.

Avantages par rapport aux flotteurs

L'approche flexbox surpasse celle basée sur les flotteurs solutions dans des scénarios spécifiques. Lorsque plusieurs div doivent être échangés et empilés verticalement, flexbox offre un comportement plus propre et plus prévisible.

De plus, l'utilisation de requêtes multimédias permet une mise en œuvre ciblée, garantissant que l'échange de position ne se produit qu'à des largeurs d'écran spécifiques, à la nature réactive du site Web.

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!