HTML
Harkitse myös -tunnistetta sen mukaan, miksi haluat katkaista div-tunnisteen. Se on rivitason elementti, eikä se katkea seuraavalle riville, ellei sen oletuskäyttäytymistä muuteta.
Jotta nämä esimerkit olisivat helpompia käyttää ja ymmärtää kaikentyyppisten tietokoneen käyttäjien kannalta, käytämme div-määritteessä style-attribuuttia. Jos aiot käyttää jotakin näistä esimerkeistä useilla sivuilla, suosittelemme luomaan välimuistiin tallennettavan CSS-tiedoston tiedoston tyyliasetuksella.
Alla näytämme divit eri väreinä havainnollistamaan, kuinka paljon tilaa ne vievät näytöllä.
Oletusarvoinen
-käyttäytyminen
Alla on esimerkki lohkoelementin Div one oletusarvoisesta div-käyttäytymisestä sen sisältävän elementin ensimmäisellä rivillä, jota seuraa toinen Div two.
Jaa yksi
Divi kaksi
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2;">Div two</div>
Aseta koko ja tee upotettuna
Koska ne ovat lohkoelementtejä, kun pienennät Div one:n kokoa tehdäksesi tilaa toiselle diville, sinulle jää tilaa Div one:n viereen ja Div doublen Div one alle. Div:n siirtämiseksi seuraavalle riville molemmilla div-elementeillä on oltava alla olevan kuvan mukainen inline-block-näyttöasetus.
Jaa yksi
Divi kaksi
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC; width: 100px; display: inline-block;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
Luodaan kolmen sarakkeen div
Alla on muutama eri esimerkki kolmen sarakkeen div:stä. Ensinnäkin alla oleva kolmen sarakkeen div noudattaa samaa ideaa kuin yllä olevat esimerkit, paitsi että se lisää div.
Jaa yksi
Divi kaksi
Jako kolme
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC; display: inline-block;">Div one</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
<div style="padding: 50px; background-color: #98AFC7; display: inline-block; margin-bottom: 2em;">Div three</div>
Tietysti, jos haluat, että divs vievät 100% sisältävän elementin, siitä tulee hieman hankalampaa. Alla on esimerkki siitä, kuinka voit luoda kolme div-merkkiä vierekkäin, jotka vievät 100 % elementistä. Alla olevassa esimerkissä sen sijaan, että pitäisimme kaikki div:t samalla rivillä käyttämällä inline-blockia, kellumme vasemman ja oikean div:n.
Jaa yksi
Jako kolme
HTML-koodi
<div style="background-color:#BCC6CC;float: left;width: 200px;padding: 50px">Div One</div>
<div style="background-color:#98AFC7;float: right;padding: 50px">DIV THREE</div>
<div style="background-color:#E5E4E2;float: none;overflow: hidden;padding: 50px">Div Two</div>
Kärki
Vaikka yllä oleva esimerkki kolmesta div-sarakkeesta on responsiivinen, voidaan myös lisätä muita mukautuksia, kuten piilottaa Div three ja säätää leveyksiä.
Alla on esimerkki lohkoelementin Div one oletusarvoisesta div-käyttäytymisestä sen sisältävän elementin ensimmäisellä rivillä, jota seuraa toinen Div two.
Jaa yksi
Divi kaksi
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2;">Div two</div>
Aseta koko ja tee upotettuna
Koska ne ovat lohkoelementtejä, kun pienennät Div one:n kokoa tehdäksesi tilaa toiselle diville, sinulle jää tilaa Div one:n viereen ja Div doublen Div one alle. Div:n siirtämiseksi seuraavalle riville molemmilla div-elementeillä on oltava alla olevan kuvan mukainen inline-block-näyttöasetus.
Jaa yksi
Divi kaksi
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC; width: 100px; display: inline-block;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div>
Luodaan kolmen sarakkeen div
Alla on muutama eri esimerkki kolmen sarakkeen div:stä. Ensinnäkin alla oleva kolmen sarakkeen div noudattaa samaa ideaa kuin yllä olevat esimerkit, paitsi että se lisää div.
Jaa yksi
Divi kaksi
Jako kolme
HTML-koodi
<div style="padding: 50px; background-color: #BCC6CC; display: inline-block;">Div one</div> <div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div two</div> <div style="padding: 50px; background-color: #98AFC7; display: inline-block; margin-bottom: 2em;">Div three</div>
Tietysti, jos haluat, että divs vievät 100% sisältävän elementin, siitä tulee hieman hankalampaa. Alla on esimerkki siitä, kuinka voit luoda kolme div-merkkiä vierekkäin, jotka vievät 100 % elementistä. Alla olevassa esimerkissä sen sijaan, että pitäisimme kaikki div:t samalla rivillä käyttämällä inline-blockia, kellumme vasemman ja oikean div:n.
Jaa yksi
Jako kolme
HTML-koodi
<div style="background-color:#BCC6CC;float: left;width: 200px;padding: 50px">Div One</div> <div style="background-color:#98AFC7;float: right;padding: 50px">DIV THREE</div> <div style="background-color:#E5E4E2;float: none;overflow: hidden;padding: 50px">Div Two</div>
Vaikka yllä oleva esimerkki kolmesta div-sarakkeesta on responsiivinen, voidaan myös lisätä muita mukautuksia, kuten piilottaa Div three ja säätää leveyksiä.
