Wie man erstellt: Vier-Spalten-Layout

Wie man ein Vier-Spalten-Layout erstellt

Schritt 1 - Fügen Sie HTML hinzu:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

In diesem Beispiel werden wir ein Vier-Spalten-Layout erstellen:

Beispiel

.column {
  float: left;
  width: 25%;
}
/* Clear the float after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Versuchen Sie es selbst

In diesem Beispiel werden wir einenResponsiveVier Spalten-Layout:

Beispiel

/*Responsive Layout - When the screen width is less than 600px, the three columns stack rather than align side by side*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Versuchen Sie es selbst

Related pages

Tutorial:CSS website layout

Tutorial:CSS responsive web design