Comment puis-je inverser l'ordre des blocs HTML en utilisant uniquement des requêtes CSS et multimédia ?-tutoriel CSS-php.cn

Comment puis-je inverser l'ordre des blocs HTML en utilisant uniquement des requêtes CSS et multimédia ?

Barbara Streisand

Libérer： 2024-11-30 16:18:10

original

718 Les gens l'ont consulté

How Can I Reverse the Order of HTML Blocks Using Only CSS and Media Queries?

Inverser l'ordre des blocs avec la flexibilité CSS

Étant donné la structure HTML fournie, il est possible de changer l'ordre des éléments de bloc uniquement en utilisant CSS, en préservant les propriétés du bloc. Voici une solution détaillée :

Requête multimédia CSS pour les appareils mobiles

Pour modifier l'ordre de blocage des appareils mobiles, utilisez une requête multimédia CSS qui cible la largeur maximale de l'appareil :

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
}

Copier après la connexion

Cette requête multimédia définit l'ordre de #blockC sur 1, ce qui en fait le premier bloc de la page.

Flexbox pour Réorganisation

Flexbox est un module de mise en page CSS qui permet la réorganisation des éléments enfants à la volée.

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

#blockA {
  order: 1;
}

#blockC {
  order: 2;
}

#blockB {
  order: 3;
}

Copier après la connexion

Dans le conteneur #parent, appliquez flexbox pour permettre l'alignement vertical des blocs. Ensuite, définissez la propriété order pour chaque bloc en fonction de l'ordre souhaité.

Exemple pratique

Voici un exemple complet utilisant JavaScript :

<!DOCTYPE html>
<html>
  <head>
    <title>Block Reordering Example</title>
    <style>
      @media only screen and (max-device-width: 480px) {
        #blockC {
          order: 1;
        }
      }

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

      #blockA {
        order: 1;
      }

      #blockC {
        order: 2;
      }

      #blockB {
        order: 3;
      }
    </style>
  </head>
  <body>
    <div>

Copier après la connexion

Cet extrait de code démontre le réorganisation des éléments de bloc en fonction de la taille de l'écran. Redimensionnez la fenêtre du navigateur pour voir l'effet de la requête multimédia en action.

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!