Elementul HTML Div
Elementul <div> este folosit ca un container pentru alte elemente HTML.
Elementul <div>
Implicit, un <div> este un element bloc, deci ocupă toată lățimea disponibilă și are întreruperi de linie înainte și după el. Nu are atribute obligatorii, dar style, class și id sunt comune.
Exemplu
Un <div> care ocupă toată lățimea, întrerupând textul din jur pe linii separate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lățimea Div</title>
</head>
<body>
<p>Lorem Ipsum <div>Eu sunt un div</div> dolor sit amet.</p>
</body>
</html>
<div> ca container
Elementul <div> este adesea folosit pentru a grupa o secțiune a paginii.
Exemplu
Un <div> care grupează un titlu și paragrafe.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Div</title>
</head>
<body>
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
</body>
</html>
Centrarea unui element <div>
Dacă un <div> nu este lat 100% și vrei să-l centrezi, setează proprietatea CSS margin la auto.
Exemplu
Un <div> centrat.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</body>
</html>
Elemente <div> Multiple
Poți avea mai multe containere <div> pe aceeași pagină.
Exemplu
Trei containere <div> stivuite pe pagină.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mai Multe Div-uri</title>
</head>
<body>
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</body>
</html>
Alinierea Elementelor <div> Unul Lângă Altul
Când construiești pagini, adesea vrei ca două sau mai multe elemente <div> să stea unul lângă altul. Există mai multe metode, toate folosind CSS. Cele mai comune sunt float, inline-block, flex și grid.
Float
Proprietatea CSS float nu a fost destinată inițial pentru a plasa elemente <div> unul lângă altul, dar a fost folosită astfel de-a lungul anilor. Ea poziționează și formatează conținutul, permițând elementelor să stea orizontal în loc de vertical.
Exemplu
Trei div-uri plasate unul lângă altul cu float.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
width: 100%;
overflow: auto;
}
.mycontainer div {
width: 33%;
float: left;
}
</style>
</head>
<body>
<div class="mycontainer">
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</div>
</body>
</html>
Inline-block
Dacă schimbi proprietatea display a unui <div> de la block la inline-block, div-urile nu mai adaugă întreruperi de linie înainte și după, deci stau unul lângă altul în loc să fie stivuite.
Exemplu
Trei div-uri unul lângă altul cu display: inline-block.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 30%;
display: inline-block;
}
</style>
</head>
<body>
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</body>
</html>
Flex
Modulul de aspect CSS Flexbox facilitează construirea unor aspecte flexibile și responsive, fără float-uri sau poziționare. Pentru a-l folosi, înfășoară elementele <div> într-un alt <div> și fă-l container flex.
Exemplu
Trei div-uri unul lângă altul cu flexbox.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width: 33%;
}
</style>
</head>
<body>
<div class="mycontainer">
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</div>
</body>
</html>
Grid
Modulul de aspect CSS Grid oferă un sistem de tip grilă din rânduri și coloane, facilitând aspectele fără float-uri sau poziționare. Este similar cu flex, dar poate defini mai multe rânduri și poziționa fiecare dintre ele. Înfășoară elementele <div> într-un container grid și setează lățimea fiecărei coloane.
Exemplu
Trei div-uri unul lângă altul cu CSS grid.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
</head>
<body>
<div class="grid-container">
<div>
<h2>London</h2>
<p>Londra este capitala Angliei.</p>
<p>Londra are peste 9 milioane de locuitori.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo este capitala Norvegiei.</p>
<p>Oslo are peste 700.000 de locuitori.</p>
</div>
<div>
<h2>Rome</h2>
<p>Roma este capitala Italiei.</p>
<p>Roma are peste 4 milioane de locuitori.</p>
</div>
</div>
</body>
</html>