Tässä artikkelissa keskustelemme jokaisesta mainituista lähestymistavoista yksitellen ja tarjoamme sopivan esimerkin jokaisesta menetelmästä.
Joten aloitetaan!
Tapa 1: Aseta kaksi Divia vierekkäin CSS:ään ruudukon avulla
CSS' ruudukko ” -asettelu mahdollistaa sen, että käyttäjä voi sijoittaa kaksi tai useampia kahta div-merkkiä vierekkäin. Pohjimmiltaan ruudukko on näyttöominaisuuden arvo, jota käytetään luomaan riveistä ja sarakkeista koostuva asettelu.
Syntaksi
Näyttöominaisuuden syntaksi ruudukkoasettelulla on annettu alla:
näyttö: ruudukko
Katsotaanpa nyt esimerkkiä, joka liittyy kahden div:n sijoittamiseen vierekkäin CSS:ssä ruudukkoasettelun avulla.
Esimerkki
Täällä luomme kaksi alidiv-tunnusta ylätason div:n sisään, joiden luokan nimet ovat ' vanhempi ”, “ lapsi ' ja ' lapsi ':
< div luokkaa = 'vanhempi' >< div luokkaa = 'lapsi' >< / div >
< div luokkaa = 'lapsi' >< / div >
< / div >
Käytä seuraavaksi CSS-osiossa ' .vanhempi ' päästäksesi päädivukseen ja asettaaksesi näyttöominaisuuden arvoksi ' ruudukko ”. Aseta seuraavaksi murto-osa käyttämällä ' ruudukko-malli-sarakkeet ”-ominaisuutta, joka luo tilaa sarakkeille. Meidän tapauksessamme asetamme murtoluvut ' 1fr ' ja ' 1fr ”, mikä tarkoittaa, että molemmat divit ovat saaneet saman tilan. Lisäksi asetamme kahden sarakkeen välisen raon sarakeväli-ominaisuuden avulla ja asetamme sen arvoksi ' 25px ”.
CSS:
.vanhempi {näyttö : ruudukko ;
ruudukko-malli-sarakkeet : 1fr 1fr ;
pylväsväli : 25px ;
}
Seuraavassa vaiheessa käytämme ' .lapsi ' päästäksesi molempiin lapsidiveihin ja asettaaksesi divien korkeudeksi ' 250 pikseliä ' ja aseta taustaväriksi ' rgb(253; 5; 109) ':
.lapsi {korkeus : 250 pikseliä ;
tausta : rgb ( 253 , 5 , 109 ) ;
}
Tämä näyttää seuraavan tuloksen:
Siirrytään toiseen tapaan sijoittaa div vierekkäin
Tapa 2: Aseta kaksi Divia vierekkäin CSS:ssä käyttämällä flexiä
' flex ” on näyttöominaisuuden arvo, joka mahdollistaa kahden div:n sijoittamisen vierekkäin. Tätä ominaisuutta käytetään joustavan tuotteen joustavan pituuden asettamiseen. Se kutistaa tai kasvattaa joustavaa esinettä sopimaan säiliöön.
Syntaksi
Näyttöominaisuuden syntaksi flexillä on alla:
näyttö: flex;Siirrytään esimerkkiin ymmärtääksemme esitetyn käsitteen.
Esimerkki
Harkitsemme samaa HTML-tiedostoa ja käytämme ' flex ” pääsäilöön. Tässä asetamme näyttöominaisuuden arvoksi flex ja asetamme alatason div-merkkien väliin ' 10px ':
.vanhempi {näyttö : flex ;
aukko : 10px ;
}
Aseta sen jälkeen div:n leveydeksi, korkeudeksi ja taustaväriksi ' 650 pikseliä ”, “ 200 pikseliä ”, ja 'rgb(0; 255; 42) ”, vastaavasti:
.lapsi {leveys : 650 pikseliä ;
korkeus : 200 pikseliä ;
tausta : rgb ( 0 , 255 , 42 ) ;
}
Annetun koodin tulos on alla:
Tapa 3: Aseta kaksi Divia vierekkäin CSS:ssä floatin avulla
CSS float -ominaisuus määrittää elementin kelluvan suunnan. Tarkemmin sanottuna tätä ominaisuutta voidaan käyttää kahden div:n sijoittamiseen vierekkäin CSS:ssä.
Syntaksi
Float-ominaisuuden syntaksi on:
kellua: ei mitään|vasen|oikeaTässä on kuvaus yllä annetuille arvoille:
- ei mitään: Sitä käytetään kellumisen rajoittamiseen.
- vasemmalle: Sitä käytetään kelluttamaan elementtejä vasemmalla puolella.
- oikein: Sitä käytetään kelluttamaan elementtejä oikealla puolella.
Siirrytään esimerkkiin divin sijoittamisesta vierekkäin.
Esimerkki
Luomme nyt kaksi div-merkkiä
-tunnisteen sisään ja annamme luokan nimeksi ' div1 ' ja ' div2 ': < kehon >< div luokkaa = 'div1' >< / div >
< div luokkaa = 'div2' >< / div >
< / kehon >
Käytä sitten ' .div1 ' ja ' .div2 ' päästäksesi HTML-osioon lisättyihin säilöihin. Käytämme molempia divejä samassa luokassa, koska ominaisuudet ja arvot, jotka aiomme määrittää molemmille, ovat samat.
Seuraavaksi määritämme kelluvan ominaisuuden arvoksi ' vasemmalle ' ja aseta div:n leveydeksi ja korkeudeksi ' viisikymmentä% ' ja ' 40 % ”. Käytämme myös box-sizing-ominaisuutta ja asetamme sen arvoksi ' raja-laatikko ”. Lisäksi aseta div:n taustaväriksi ' rgb(7; 255; 222) ' ja aseta rajaomaisuuden arvoiksi ' 3px ”, “ kiinteä ”, ja ” rgb(255; 0; 255) ':
.div1 , .div2 {kellua : vasemmalle ;
leveys : viisikymmentä% ;
korkeus : 40 % ;
laatikon kokoinen : raja-laatikko ;
tausta : rgb ( 7 , 255 , 222 ) ;
rajaa : 3px kiinteä rgb ( 255 , 0 , 255 ) ;
}
merkintä: Voit sijoittaa kaksi div-merkkiä vierekkäin käyttämättä box-sizing-ominaisuutta ja border-ominaisuutta asettamalla div-elementtien eri taustavärit.
Kun olet ottanut yllä olevan koodin käyttöön, suorita HTML-tiedosto ja näet tuloksen:
merkintä: Luodaksesi aukon kahden divin välille, luo ensin toinen div ja aseta sitten div:n marginaali vastaavasti.
Johtopäätös
Divit voidaan sijoittaa vierekkäin käyttämällä kolmea erilaista CSS-menetelmää, jotka ovat ' flex ' ja ' ruudukko ' näytön ominaisuuden arvot ja ' kellua ” omaisuutta. Jokainen menetelmä toimii tehokkaasti; Voit kuitenkin käyttää mitä tahansa niistä tarpeidemme mukaan. Tässä oppaassa olemme käsitelleet kolmea tapaa sijoittaa div vierekkäin CSS:n avulla ja toimittaneet niihin liittyviä esimerkkejä.