Savjet: Ovisno o tome zašto želite razbiti div možete razmisliti o korištenju oznake koja je element u razini inline i ne prekida se u sljedeći redak ako se njegovo ponašanje ne promijeni.
Napomena: da bi se ti primjeri lakše koristili i razumjeli za sve vrste korisnika računala, koristimo atribut stila u odjeljku div. Ako namjeravate upotrijebiti bilo koji od ovih primjera na više stranica, preporučujemo da u datoteci izradite CSS datoteku koja se može predmemorirati s postavkama stila.
U našim primjerima u nastavku, prikazivat ćemo divove kao različite boje kako bismo ilustrirali koliko razmaka zauzima div i gdje se na zaslonu smješta div.
Zadano ponašanje
U nastavku je primjer zadanog ponašanja div-a bloka elementa Div jedan koji zauzima prvi redak njegovog elementa koji slijedi, a zatim slijedi drugi Div 2. \ t
Div jedan
Div dva
Div jedan Div dva
Čak i ako biste smanjili veličinu Div-a da biste napravili mjesta za drugi div, jer su to elementi bloka, ostali biste s prostorom pored Div-a i Div-2 ispod Div-a . Da biste pomaknuli odjeljak do sljedećeg retka, oba dijela moraju imati postavku prikaza inline-bloka kao što je prikazano ispod.
Div jedan
Div dva
Div jedan Div dva
U nastavku je nekoliko primjera tri stupca div. Prvo, ispod tri stupca div slijedi istu ideju kao i gornji primjeri, osim što dodaje div.
Div jedan
Div dva
Div tri
Div 1 Div Div 3 Div
Naravno, ako želite da divovi zauzmu 100% elementa koji ga sadrže, to postaje malo teže. U nastavku je jedan primjer kako možete stvoriti tri dijela jedan do drugog koja zauzimaju 100% elementa. U donjem primjeru, umjesto da sve divove držimo na istoj liniji pomoću inline-bloka, plutamo lijevu i desnu div.
Div jedan
Div tri
Div dva
Div 1 DIV TRI Div Div
Savjet: Iako je gore navedeni primjer tri stupca odgovora dodatna prilagodba, kao što je skrivanje Div 3 i prilagodba širine, može se dodati stilu.