Näpunäide: Sõltuvalt sellest, miks soovite divi katkestada, võiksite kaaluda ka sildi kasutamist, mis on inline-tasemel element ja ei purune järgmisele reale, kui selle vaikimisi käitumist ei muudeta.
Märkus. Selleks, et neid näiteid oleks lihtsam kasutada ja mõista kõigi arvutitüüpide kasutajate jaoks, kasutame me div. Kui kavatsete kasutada mõnda neist näidetest mitmel lehel, soovitame luua vahemällu salvestatava CSS-faili, millel on failis stiiliseaded.
Meie allpool toodud näidetes näidatakse divs erinevaid värve, mis aitavad illustreerida, kui palju vahekaugust divis on ja kus ekraanil on div.
Vaikimisi käitumine
Allpool on näidatud plokielemendi Div vaikimisi div-käitumise näide, mis asub selle elementi esimesel real, millele järgneb teine Div 2 .
Div üks
Div kaks
Div üks Div
Isegi kui sa oleksid vähendanud Divi suurust, et teha ruumi teisele divile, sest nad on plokkelemendid, siis jääksid sa ruumi Divi ja Div-i kõrval Divi alla. Divi liigutamiseks järgmisele reale peavad mõlema divi vajadusel olema inline-block-kuva, nagu allpool näidatud.
Div üks
Div kaks
Div üks Div
Allpool on mõned kolmest veerust div. Esiteks järgib allpool toodud kolme veeru div sama ideed nagu ülaltoodud näited, välja arvatud juhul, kui see lisab div.
Div üks
Div kaks
Kolmas
Div üks Div kaks kolm
Loomulikult, kui soovite, et divs hõivaks 100% sisaldavast elemendist, muutub see veidi keerulisemaks. Allpool on üks näide sellest, kuidas te saate luua kolm div 'üksteise kõrval, mis mahutavad 100% elemendist. Alljärgnevas näites, selle asemel, et hoida kõiki divisid samas reas, kasutades inline-block, ujume vasakut ja paremat div.
Div üks
Kolmas
Div kaks
Div One DIV KOLMAS Div Two
Näpunäide: Kuigi ülaltoodud kolme div veeru näide on täiendav kohandamine, näiteks Div 3 peitmine ja laiuse reguleerimine, saab lisada ka stiili.