CSS Website Layout. Conţinut.

Susține Lectii-Virtuale!

Conţinut (Content)

Aspectul din această secțiune depinde adesea de utilizatorii vizați. Cea mai comună dispunere este una (sau combinarea lor) dintre următoarele:

• 1-column - (adesea folosit pentru browserele mobile)
• 2-column - (adesea folosit pentru tablete și laptopuri)
• 3-column layout  - (utilizată doar pentru desktopuri)

Vom crea un 3-column layout  și îl vom schimba într-un 1-column layout pe ecrane mai mici:



Exemplu:

/* Creați trei coloane egale care plutesc (float) unul lângă celălalt  */
.column {
  float: left;
  width: 33.33%;
}

/* Șterge floats după coloane  */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - face ca cele trei coloane să se stivească una peste alta, în loc să fie una lângă alta pe ecrane mai mici (600px lățime sau mai puțin) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Rezultat:



Sfat: Pentru a crea un aspect cu două coloane, schimbați lățimea la 50%. Pentru a crea un aspect cu 4 coloane, utilizați 25% etc.
Sfat: Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox. Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats (după cum se arată mai sus).