Wie behalte ich in CSS die gleiche Höhe für Spalten mit unterschiedlichen Inhaltslängen bei?

CSS: Gleiche Höhe für Spalten mit unterschiedlichen Inhaltslängen beibehalten

In einem zweispaltigen Layout ist es wünschenswert, die Listen innerhalb jeder Spalte auszurichten Spalte horizontal, auch wenn die Inhaltslängen variieren. Dies stellt bei responsiven Designs eine Herausforderung dar, da Spalten auf kleineren Bildschirmen möglicherweise umbrechen.

Um diese Ausrichtung ohne JavaScript zu erreichen, ist eine Methode erforderlich, die es Elementen ermöglicht, einander als Geschwister zu sehen. Bei größeren Bildschirmgrößen muss die Reihenfolge der Elemente neu angeordnet werden, um eine ordnungsgemäße Stapelung sicherzustellen.

Hier ist eine aktualisierte Version Ihres Codes unter Verwendung von CSS und einer Medienabfrage:

@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
}

Diese Medienabfrage führt ein Flexbox-Layout für das .content-Element ein, das es seinen untergeordneten Elementen ermöglicht, flexibel ausgerichtet und umbrochen zu werden. Die Reihenfolgeeigenschaften stellen sicher, dass die Elemente korrekt gestapelt werden, wenn die Spalten auf kleineren Bildschirmen umbrechen.

Um den Elementen zur visuellen Unterscheidung Rahmen hinzuzufügen, können Sie Kombinationen aus Rand oben, Rand links und Rand rechts verwenden , und border-bottom, angepasst mit zusätzlichen Medienabfragen, um sowohl horizontales als auch vertikales Stapeln zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonWie behalte ich in CSS die gleiche Höhe für Spalten mit unterschiedlichen Inhaltslängen bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!