Miten luodaan: kaksi sarakkeen sijoitus

Opit CSS:n avulla kaksi sarakkeen sijoitusverkon luomisen.

Sarakkeessa 1

Joitakin tekstejä...

Sarakkeessa 2

Joitakin tekstejä...

Kokeile itse

Miten luodaan kaksi sarakkeen sijoitus

Ensimmäinen vaihe - Lisää HTML:

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

Toinen vaihe - Lisää CSS:

Tässä esimerkissä luomme kaksi yhtä leveääYhtä leveätSarakkeet:

Liikkuvuus esimerkki

.column {
  float: left;
  width: 50%;
}
/* Poista sarakkeen jälkeen liikkuvuus */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Kokeile itse

Tämänhetkinen tapa luoda kaksi saraketta CSS Flexboxilla. Se ei tue Internet Explorer 10 ja aikaisempia versioita.

Flex esimerkki

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

Kokeile itse

Voit valita käyttää liikkuvaa tai flex-mekanismia kahden sarakkeen sijoituksen luomiseen. Mutta jos tarvitset tukea IE10 ja aikaisemmille versioille, käytä liikkuvaa.

Vinkki:Lisätietoja Flexible Box Layout Modulesta löydät CSS Flexbox oppitunti。

Tässä esimerkissä luomme kaksi eri leveyttä saraketta:

Esimerkki

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

Kokeile itse

Tässä esimerkissä luommeVastaanottavaKaksi sarakkeen sijoitus:

Esimerkki

/* Vastaanottava sijoitus - kun näytön leveys on alle 600px, kaksi saraketta sijoitetaan ylekkäin, ei rinnakkain */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kokeile itse

Liittyvät sivut

Oppitunti:CSS-verkkosivun asettelu

Oppitunti:CSS vastaanottava verkkosivun suunnittelu