Comment puis-je réorganiser les éléments de bloc HTML en utilisant uniquement CSS ?

CSS pour réorganiser les éléments de bloc

Rechercher une méthode pour réorganiser l'ordre des éléments de bloc HTML uniquement via CSS peut être un défi. Cette question aborde ce problème, dans le but de changer l'ordre de trois blocs sans compromettre leur comportement d'affichage en tant qu'éléments de bloc.

La solution CSS

La solution fournie utilise CSS flexbox . En définissant l'élément parent sur display:flex et flex-flow: column, les éléments sont empilés verticalement. Ensuite, à l’aide de la propriété order, l’ordre des éléments enfants peut être personnalisé. Par exemple, #a {order:2;} déplacerait l'élément avec id="a" vers la deuxième position.

Implémentation

Pour implémenter cette solution, définissez d'abord l'élément parent à afficher en tant que conteneur flexible :

#parent { display: flex; flex-flow: column; }

Ensuite, utilisez la propriété order pour modifier l'ordre de l'enfant elements :

#a { order: 2; }
#b { order: 3; }
#c { order: 1; }

Considérations sur les requêtes multimédias

Pour répondre à différentes tailles d'écran, une requête multimédia peut être utilisée pour contrôler la mise en page. Par exemple, la règle suivante changerait l'ordre des blocs pour les écrans d'une largeur maximale de 300 px :

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a { order: 2; }
  #b { order: 3; }
  #c { order: 1; }
}

Exemple

Voici un exemple simplifié qui démontre le concept :

<div>

Ajustez la largeur de la fenêtre du navigateur pour observer comment l'ordre des éléments div changements.

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!