Nasvet: Odvisno od tega, zakaj želite prekiniti div, boste morda želeli razmisliti tudi o uporabi oznake, ki je element v ravni ravni in se ne premakne v naslednjo vrstico, razen če se spremeni privzeto vedenje.
Opomba: Da bi bili ti primeri enostavnejši za uporabo in razumevanje za vse vrste uporabnikov računalnika, uporabljamo atribut slog v razdelku. Če nameravate uporabiti katerega od teh primerov na več straneh, vam priporočamo, da v datoteki ustvarite datoteko CSS s predpomnilnikom, ki ima nastavitve sloga.
V naših spodnjih primerih bomo razdelke prikazovali v različnih barvah, da bi prikazali, koliko razmika zaseda div in kje na zaslonu je postavljen div.
Privzeto vedenje
Spodaj je primer privzetega obnašanja Dela blokovnega elementa Div ena, ki zaseda prvo vrstico njegovega vsebovanega elementa, ki mu sledi drugi Div dva .
Div ena
Div 2
Div 1 Div 2
Tudi če bi zmanjšali velikost Div, da bi naredili prostor za druge div, ker so blokovni elementi, bi vas pustili s prostorom poleg Div enega in Div dva pod Div 1 . Za premik razdelka v naslednjo vrstico potrebujete oba, da imajo nastavitev prikaza inline-blok, kot je prikazano spodaj.
Div ena
Div 2
Div 1 Div 2
Spodaj je prikazanih nekaj različnih primerov razdelka treh stolpcev. Prvič, spodnja tri stolpca div sledi isti ideji kot zgornji primeri, razen da doda div.
Div ena
Div 2
Div tri
Div 1 Div Div 3 Div
Seveda, če želite, da divi zasedajo 100% vsebovanega elementa, postane malo bolj naporno. Spodaj je prikazan primer, kako lahko ustvarite trije divje, ki se nahajajo skupaj 100% elementa. V spodnjem primeru namesto, da bi bili vsi deli na isti liniji z uporabo inline-bloka, plavajo levi in desni div.
Div ena
Div tri
Div 2
Div One DIV TRI Div 2
Nasvet: Čeprav je zgornji primer stolpca trije odzivi na dodatne prilagoditve, kot je skrivanje Div tri in prilagajanje širin, lahko dodate tudi slogu.