Sådan oprettes: Fire kolonner layout

Sådan oprettes en fire kolonner layout

Trin 1 - Tilføj HTML:

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

Trin 2 - Tilføj CSS:

I dette eksempel vil vi oprette en fire kolonner layout:

Eksempel

.column {
  float: left;
  width: 25%;
}
/* Ryd efter kolonnerne */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prøv det selv

I dette eksempel vil vi oprette enResponsivFire kolonner layout:

Eksempel

/* Responsiv layout - når skærmens bredde er mindre end 600px, gør tre kolonner overlappe i stedet for at være ved siden af hverandre */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prøv det selv

Related pages

Tutorial:CSS website layout

Tutorial:CSS responsive web design