Wie kann ich mit CSS ein Layout mit gleich großen Elementen erstellen?

Erstellen eines Layouts mit gleich großen Elementen mithilfe von CSS

Das Ziel besteht darin, ein Layout zu erreichen, bei dem jedes Element die gleiche Breite wie das breiteste hat Element, unabhängig vom Inhalt. Dieses Layout kann mehrere Zeilen haben und Elemente entsprechend umbrechen.

Verwendung von JavaScript

Wie im bereitgestellten Beispiel gezeigt, kann JavaScript diese Aufgabe leicht erfüllen, indem es die maximale Breite zwischen berechnet die Elemente und weist dann allen Elementen diese Breite zu.

Das gleiche Layout erreichen mit CSS

Es ist auch möglich, dieses Layout mit reinem CSS zu erreichen, ohne dass JavaScript erforderlich ist. So geht's:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

Dieses CSS wendet die folgenden Stile an:

• Der .list-container fungiert als Container, der die Liste umschließt.
• Der . list ist für die vertikale Anzeige der Elemente verantwortlich.
• Das .list-item wendet Stile auf jedes einzelne Element an item.

Indem wir die Eigenschaft „flex-wrap“ auf „umbrechen“ setzen und den justify-content als „flex-start“ innerhalb von .list-item angeben, stellen wir sicher, dass die Elemente bei Bedarf in neue Zeilen umgebrochen werden Aufrechterhaltung ihrer Rechtfertigung bis zum Zeilenanfang.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein Layout mit gleich großen Elementen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!