Sådan oprettes: to-kolonne layout

Sådan oprettes to-kolonne layout

Første trin - Tilføj HTML:

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

Anden trin - Tilføj CSS:

I dette eksempel vil vi oprette to kolonner med samme bredde:Lige breddekolonnerne:

Float eksempel

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

Prøv det selv

Den moderne måde at oprette et to-kolonne layout på er ved at bruge CSS Flexbox. Men det understøtter ikke Internet Explorer 10 og ældre versioner.

Flex eksempel

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Prøv det selv

Du kan vælge at bruge float eller flex til at oprette et to-kolonne layout. Men hvis du har brug for at støtte IE10 og ældre versioner, skal du bruge float.

Tip:For at få mere information om Flexible Box Layout Module, læs vores CSS Flexbox tutorial。

I dette eksempel vil vi oprette to kolonner med forskellige bredder:

Eksempel

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Prøv det selv

I dette eksempel vil vi oprette enResponsivTo kolonner layout:

Eksempel

/* Responsiv layout - når skærmens bredde er mindre end 600px, skal to kolonner stå ved siden af hinanden, ikke side om side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prøv det selv

Relaterede sider

Tutorial:CSS website layout

Tutorial:CSS responsivt webdesign