Sfat: În funcție de motivul pentru care doriți să întrerupeți div, vă recomandăm să luați în considerare utilizarea unei etichete, care este un element la nivel de linie și nu se rupe la linia următoare, cu excepția cazului în care comportamentul implicit este modificat.
Notă: Pentru a face aceste exemple mai ușor de utilizat și de înțeles pentru toate tipurile de utilizatori de computere, folosim atributul de stil din secțiunea div. Dacă intenționați să utilizați oricare dintre aceste exemple pe mai multe pagini, vă recomandăm să creați un fișier CSS cacheable cu setările de stil din fișier.
În exemplele de mai jos, vom arăta divs-urile ca culori diferite pentru a ilustra cât de mult spațiu ocupă div și unde pe ecran este plasat div.
Implicit
Mai jos este un exemplu de div de comportament implicit al elementului de bloc Div unul care ocupă prima linie a elementului său care conține, urmat de al doilea Div doi .
Div 1
Div 2
Div 2 Div 2
Chiar dacă ai reduce dimensiunea unui div pentru a face loc celei de-a doua div, pentru că ele sunt blocuri, vei fi lăsat cu spațiul de lângă Div one și Div two below Div one . Pentru a muta div până la următoarea linie, atât necesitatea lui div de a avea setarea de afișare în linie blocată, după cum se arată mai jos.
Div 1
Div 2
Div 2 Div 2
Mai jos sunt câteva exemple diferite de diviziune cu trei coloane. În primul rând, diviziunea de mai jos trei urmează aceeași idee ca și exemplele de mai sus, cu excepția faptului că adaugă div.
Div 1
Div 2
Div 3
Div 2 Div 3 Div 3
Desigur, dacă doriți ca Divs să ocupe 100% din elementul care conține, devine puțin mai complicat. Mai jos este un exemplu despre modul în care puteți crea trei divuri unul lângă altul care ocupă 100% din element. În exemplul de mai jos, în loc să păstrăm toate divurile pe aceeași linie utilizând blocul inline, plutim la stânga și la dreapta div.
Div 1
Div 3
Div 2
Divizia 1 Divinul trei
Sfat: Deși exemplul de mai sus al unei coloane de trei div este personalizarea suplimentară receptivă, cum ar fi ascunderea Div trei și ajustarea lățimilor pot fi, de asemenea, adăugate stilului.