CSS-də iki sütunlu sayt maketinin sxemi

Gəlin aşağıdakı növ iki sütunlu maket edək:

Əvvəlcə səhifənin əsas quruluşunu yaradaq:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="content">
      content
    </div>
    <div id="sidebar">
      sidebar
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

İndi qabığa (wrapper) stil təyin edək, onu ekranın mərkəzinə yerləşdirək:

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

İndi header və footer üçün stillər təyin edək:

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

Gördüyünüz kimi, biz header və footer-ə hündürlük təyin edirik. Biz bunu ona görə edirik ki, bizim sxemdə onların məzmunu yoxdur. Məzmun olduqda hündürlüyü bloklara təyin etmək lazım deyil - o onların məzmunu ilə formalaşacaq.

Həmçinin diqqət edin ki, biz onlara en təyin etmirik. Məsələ burundadır ki, header və footer - blok elementlərdir və onların eni avtomatik olaraq qabığın eninə bərabər olacaq.

Gəlin indi onlara padding təyin edək, belə ki, mətn sərhədlərə yapışmasın:

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

Ancaq padding-in olması blokların ölçülərinə pis təsir edəcək - onlar göstəriləndən daha böyük olacaq. Gəlin bütün blokların davranışını dəyişək belə ki, padding və sərhədlər bizim bloklarımızı genişləndirməsin:

css* {
  box-sizing: border-box;
}

İndi bizə content və sidebar-i bir sıraya qoymaq lazımdır. Bunu flekslərlə edək:

css#container {
  display: flex;
}

Content və sidebar-ə onların enini göstərək. Bununla onların enlərinin cəmi qabığın eninə bərabər olmalıdır:

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

Tutaq ki, biz sidebar və content arasında boşluq etmək istəyirik. Bu halda sidebar-ə margin qoymaq lazımdır. Bununla biz bu margin üçün eni kimsədən qoparmağa məcbur olarıq. Content-dən qoparaq, müvafiq olaraq onun enini azaldaq:

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Gəlin indi hündürlük əlavə edək, çünki bizim elementlərimiz məzmun saxlamır. Kifayətdir hündürlüyü yalnız bir elementə əlavə etmək, çünki ikinci fleks elementi hündürlüyə uyğunlaşacaq (niyə?). Gəlin hündürlüyü content-ə təyin edək:

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Gəlin content və sidebar-ə qalan stilləri əlavə edək:

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

Hamısı, bizim maketimiz hazırdır. Bütün kodu birlikdə yığaq:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="sidebar">
      sidebar
    </div>
    <div id="content">
      content
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

css* {
  box-sizing: border-box;
}

#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}
#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#container {
  display: flex;
}
#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}