Wie kann ich die Reihenfolge von HTML-Blöcken umkehren, indem ich nur CSS- und Medienabfragen verwende?-CSS-Tutorial-php.cn

Wie kann ich die Reihenfolge von HTML-Blöcken umkehren, indem ich nur CSS- und Medienabfragen verwende?

Barbara Streisand

Freigeben： 2024-11-30 16:18:10

Original

707 Leute haben es durchsucht

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

Umkehren der Blockreihenfolge mit CSS-Flexibilität

Angesichts der bereitgestellten HTML-Struktur ist es möglich, die Reihenfolge von Blockelementen ausschließlich mithilfe von CSS zu ändern und dabei die Blockeigenschaften beizubehalten. Hier ist eine detaillierte Lösung:

CSS-Medienabfrage für mobile Geräte

Um die Blockreihenfolge für mobile Geräte zu ändern, verwenden Sie eine CSS-Medienabfrage, die auf die maximale Gerätebreite abzielt:

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

Nach dem Login kopieren

Diese Medienabfrage setzt die Reihenfolge von #blockC auf 1 und macht ihn zum ersten Block auf der Seite.

Flexbox für Neuanordnen

Flexbox ist ein CSS-Layoutmodul, das die Neuordnung untergeordneter Elemente im Handumdrehen ermöglicht.

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

#blockA {
  order: 1;
}

#blockC {
  order: 2;
}

#blockB {
  order: 3;
}

Nach dem Login kopieren

Wenden Sie im #parent-Container Flexbox an, um eine vertikale Ausrichtung der Blöcke zu ermöglichen. Legen Sie dann die Reihenfolgeeigenschaft für jeden Block entsprechend der gewünschten Reihenfolge fest.

Praktisches Beispiel

Hier ist ein vollständiges Beispiel für die Verwendung von 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>

Nach dem Login kopieren

Dieser Codeausschnitt demonstriert die Neuordnung von Blockelementen basierend auf der Bildschirmgröße. Ändern Sie die Größe des Browserfensters, um die Auswirkung der Medienabfrage in Aktion zu sehen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Reihenfolge von HTML-Blöcken umkehren, indem ich nur CSS- und Medienabfragen verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!