Skip to content

Lecția 15: Float-uri și Coloane în CSS

Overview:

În această lecție, vom explora utilizarea float-urilor și crearea de coloane în CSS. Aceste tehnici sunt adesea folosite pentru a crea structuri de layout flexibile și pentru a organiza conținutul pe o pagină web.

Key Concepts:

  1. Float-uri:
    • Utilizarea proprietății float pentru a scoate un element din fluxul normal și a-l poziționa în stânga sau în dreapta.
    • Efectele asupra elementelor în jur și necesitatea de a utiliza clear pentru a gestiona aceste efecte.
  2. Crearea de Coloane:
    • Folosirea float-urilor pentru a crea un layout cu mai multe coloane.
    • Adăugarea marginilor și a padding-urilor pentru a separa coloanele și a oferi spațiu între conținut.
  3. Proprietatea clear:
    • Utilizarea clear pentru a specifica unde un element trebuie să înceapă după ce s-au încheiat float-urile.

Detailed Examples:

1. Utilizarea Float-urilor:
/* Exemplu de utilizare a float-urilor pentru alinierea la stânga */
.float-stanga {
  float: left;
  margin-right: 20px; /* Adăugare spațiu între element și elementul următor */
}

/* Exemplu de utilizare a float-urilor pentru alinierea la dreapta */
.float-dreapta {
  float: right;
  margin-left: 20px; /* Adăugare spațiu între element și elementul următor */
}

/* Clear pentru a rezolva efectele float-urilor */
.clear-fix::after {
  content: "";
  display: table;
  clear: both;
}
2. Crearea de Coloane:
/* Stilizare pentru coloane folosind float-uri */
.colonata {
  width: 30%; /* Setare lățime coloană */
  float: left;
  margin-right: 3%; /* Adăugare spațiu între coloane */
}

/* Clear pentru a rezolva efectele float-urilor într-un layout cu coloane */
.colonata::after {
  content: "";
  display: table;
  clear: both;
}

Exercițiul Practic: CSS – Float-uri și Coloane

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercițiul Practic: Float-uri și Coloane</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="float-stanga">
    <p>Text aliniat la stânga cu float.</p>
  </div>

  <div class="float-dreapta">
    <p>Text aliniat la dreapta cu float.</p>
  </div>

  <div class="clear-fix">
    <p>Acest paragraf este plasat sub float-uri și nu este influențat de ele datorită clear-fix.</p>
  </div>

  <div class="colonata">
    <p>Coloana 1</p>
  </div>

  <div class="colonata">
    <p>Coloana 2</p>
  </div>

  <div class="colonata">
    <p>Coloana 3</p>
  </div>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare pentru float-uri */
.float-stanga {
  float: left;
  margin-right: 20px;
}

.float-dreapta {
  float: right;
  margin-left: 20px;
}

.clear-fix::after {
  content: "";
  display: table;
  clear: both;
}

/* Stilizare pentru coloane folosind float-uri */
.colonata {
  width: 30%;
  float: left;
  margin-right: 3%;
}

.colonata::after {
  content: "";
  display: table;
  clear: both;
}

Recomandări:

  • Experimentați cu diferite lățimi și spații între elemente pentru a obține un aspect echilibrat.
  • Asigurați-vă că utilizați clear pentru a rezolva efectele float-urilor și pentru a evita problemele de layout nedorite.