Vinkki: Riippuen siitä, miksi haluat murtaa divin, kannattaa harkita myös tagin käyttöä, joka on linjatasoinen elementti ja joka ei rikkoa seuraavaa riviä, ellei sen oletuskäyttäytymistä muuta.
Huomautus: Jotta nämä esimerkit olisivat helpompia käyttää ja ymmärtää kaikentyyppisille tietokoneen käyttäjille, käytämme div. Jos aiot käyttää jotakin näistä esimerkeistä useilla sivuilla, suosittelemme, että luot välimuistissa olevan CSS-tiedoston, jossa on tyyliasetukset tiedostoon.
Alla olevissa esimerkeissämme näytämme divs eri väreinä, jotka auttavat havainnollistamaan kuinka paljon etäisyys div on käytössä ja missä näytöllä div sijoitetaan.
Oletuskäyttäytyminen
Alla on esimerkki lohkoelementin Div oletusarvoista div-käyttäytymisestä, joka sijaitsee sen sisältävän elementin ensimmäisellä rivillä ja sen jälkeen toisella divilla .
Div yksi
Kaksi kappaletta
Div Div Div
Vaikka olisit vähentänyt Div: n kokoa, jotta saat tilaa muille diville, koska ne ovat lohkoelementtejä, sinä jätät tilaa, jonka vieressä on Div ja Div kaksi Divin alapuolella. Jos haluat siirtää div-rivin seuraavaan riviin, molempien divin tarve on, että näytöllä on sisäinen lohko, kuten alla on esitetty.
Div yksi
Kaksi kappaletta
Div Div Div
Alla on muutama esimerkki kolmesta sarakkeesta div. Aluksi kolme alla olevaa saraketta div seuraa samaa ajatusta kuin edellä mainitut esimerkit, paitsi että se lisää div.
Div yksi
Kaksi kappaletta
Kolmas
Div yksi Div kaksi div
Tietenkin, jos haluat, että divit käyttävät 100% sisältävästä elementistä, se saa hieman vaikeampaa. Alla on yksi esimerkki siitä, kuinka voit luoda kolme diviä toistensa vieressä, jotka kuluttavat 100% elementistä. Alla olevassa esimerkissä, sen sijaan, että kaikki divit olisivat samassa linjassa linja-lohkon avulla, olemme kelluva vasen ja oikea div.
Div yksi
Kolmas
Kaksi kappaletta
Div One DIV KOLME Div Div
Vinkki: Vaikka yllä oleva esimerkki kolmesta div-sarakkeesta on mukautuva lisäasennus, kuten Div 3: n piilottaminen ja leveyden säätäminen, voidaan lisätä myös tyyliin.