So behalten Sie die Ausrichtung in responsiven Zeilen ohne JavaScript bei

Beibehalten der Größe von Geschwistern in reaktionsfähigen Zeilen

Wenn Sie mit Spalten konfrontiert werden, die unterschiedliche Inhaltslängen enthalten und Sie die Ausrichtung innerhalb dieser beibehalten möchten, verwenden Sie JavaScript ist nicht nötig. Durch Ändern von CSS können wir flexible Layouts erstellen, die die gewünschte Funktionalität erfüllen, ohne die mobilen Optimierungen zu beeinträchtigen.

Der Schlüssel besteht darin, die Elemente in jeder Spalte zu direkten Geschwistern zu machen, sodass sie sich gegenseitig „sehen“ können. Anschließend verwenden wir Medienabfragen, um ihre Reihenfolge basierend auf der Bildschirmbreite neu zu ordnen. Dadurch wird sichergestellt, dass die Elemente auf breiteren Bildschirmen nebeneinander liegen, während sie auf schmaleren Bildschirmen vertikal gestapelt werden.

Aktualisierter Code:

Um dies zu erreichen, Wir führen eine Inhaltsklasse ein, die alle Elemente innerhalb jeder Spalte umschließt:

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

Einzelne Elemente innerhalb des Inhalts erhalten eine benutzerdefinierte Breite:

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

Medienabfrage:

Für breitere Bildschirme verwenden wir eine Medienabfrage, um die Elemente neu anzuordnen und ihre Breiten anzupassen:

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

Zusätzliche Hinweise:

• Möglicherweise müssen Sie den Medienabfrage-Haltepunkt und die Flex-Basiswerte für verschiedene Bildschirmgrößen anpassen.
• Um unterschiedliche Höhen von Elementen zu berücksichtigen, können Sie Rahmeneigenschaften mit zusätzlichen Medienabfragen auf einzelne Elemente anwenden.

Das obige ist der detaillierte Inhalt vonSo behalten Sie die Ausrichtung in responsiven Zeilen ohne JavaScript bei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!