Rekomenduemye kursy

Kak sozdat': dvukh kolonok razmetka

Uchite'sya, kak ispol'zovat' CSS dlya sozdaniya dvukh kolonok razmetki grida.

Kolonka 2

Kolonka 1

Kolonka 2

Popytai sam

Nekotorye teksty...

Kak sozdat' dvukh kolonok razmetku

Step 1 - Dodat' HTML:
  <div class="row">
  <div class="row">
<div class="column"></div>

</div>

Step 2 - Dodat' CSS:V etom primere my sozdadim dve ravnoширnye kolonki:Ravnoobraznye

Primer plynut' kolonok:

.column {
  float: left;
  width: 50%;
}
/* Udalit' plynut' za kolonkami */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Popytai sam

Sovremennyiy sposob sozdaniya dvukh kolonok - ispol'zovanie CSS Flexbox. No on ne podderzhivaet Internet Explorer 10 i denezhnye vydaniya.

Primer Flex

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

Popytai sam

Vy mozhete vybrat' polzovanie float ili flex dlya sozdaniya dvukh kolonok. No esli vam nuzhno podderzhat' IE10 i denezhnye vydaniya, togda ispol'zuyte float.

Polozhenie:Dlya polnogo informirovaniya o Module Flexible Box Layout, prochitat' nas Uchebnik po CSS Flexbox.

V etom primere my sozdadim dve ne ravnoширnye kolonki:

Primer

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

Popytai sam

V etom primere my sozdadimResponsivnostDvadtsat kolonok razmetki:

Primer

/* Responsivnaya razmetka - pri razmere ekranov men'she 600px, dvadtsat kolonki skuplyayutsya, a ne ravnolezhe */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Popytai sam

Svyazannye stranytsi

Uchebnik:CSS макет сайта

Uchebnik:CSS responsivnaya veb-stranitsa