Ebben a cikkben az említett megközelítések mindegyikét egyenként tárgyaljuk, és minden módszerre megfelelő példát adunk.
Szóval, kezdjük!
1. módszer: Helyezzen el két Divt egymás mellett a CSS-ben rács segítségével
A CSS' rács ” elrendezés lehetővé teszi a felhasználó számára, hogy két vagy több div elemet helyezzen el egymás mellett. Alapvetően a rács a megjelenítési tulajdonság értéke, amelyet egy sorokból és oszlopokból álló elrendezés létrehozásához használnak.
Szintaxis
A megjelenítési tulajdonság szintaxisa rács elrendezéssel az alábbiakban látható:
kijelző: rács
Most nézzünk meg egy példát két div egymás mellé helyezésére vonatkozóan a CSS-ben a rácselrendezés használatával.
Példa
Itt két gyermek divet fogunk létrehozni a szülő divben, amelyek osztálynevei a következők: szülő ”, „ gyermek ” és „ gyermek ”:
< div osztály = 'szülő' >< div osztály = 'gyermek' >< / div >
< div osztály = 'gyermek' >< / div >
< / div >
Ezután a CSS részben használja a ' .szülő ' a szülő div eléréséhez és a megjelenítési tulajdonság értékének beállításához ' rács ”. Ezután állítsa be a törtet a „ rács-sablon-oszlopok ” tulajdonság, hogy helyet hozzon létre az oszlopok számára. A mi esetünkben a törteket a következőképpen állítjuk be 1 fr ” és „ 1 fr ”, ami azt jelenti, hogy mindkét div egyenlő helyet kapott. Ezenkívül beállítjuk a két oszlop közötti rést az oszlopköz tulajdonság használatával, és az értékét a következőképpen állítjuk be: 25 képpont ”.
CSS:
.szülő {kijelző : rács ;
rács-sablon-oszlopok : 1 fr 1 fr ;
oszlop-rés : 25 képpont ;
}
A következő lépésben a „ .gyermek ' a gyermek div eléréséhez és a div magasságának beállításához ' 250 képpont ', és állítsa be a háttérszínt '' rgb(253; 5; 109) ”:
.gyermek {magasság : 250 képpont ;
háttér : rgb ( 253 , 5 , 109 ) ;
}
Ez a következő eredményt mutatja:
Térjünk át egy másik módszerre a div egymás mellé helyezéséhez
2. módszer: Helyezzen el két Divt egymás mellett a CSS-ben flex segítségével
Az ' Flex ” a megjelenítési tulajdonság értéke, amely lehetővé teszi két div egymás mellé helyezését. Ez a tulajdonság a rugalmas cikk rugalmas hosszának beállítására szolgál. Összezsugorítja vagy megnöveli a rugalmas elemet, hogy elférjen a tartályában.
Szintaxis
A megjelenítési tulajdonság flex szintaxisa az alábbiakban látható:
kijelző: flex;Térjünk át a példára, hogy megértsük a megfogalmazott koncepciót.
Példa
Ugyanazt a HTML-fájlt vesszük figyelembe, és alkalmazzuk a „ Flex ” a szülőtárolóba. Itt a megjelenítési tulajdonság értékét flex értékre állítjuk, és a gyermek divek közötti rést a következőképpen állítjuk be: 10 képpont ”:
.szülő {kijelző : Flex ;
rés : 10 képpont ;
}
Ezután állítsa be a div szélességét, magasságát és háttérszínét ' 650 képpont ”, „ 200 képpont ”, és 'rgb(0; 255; 42) ”, illetve:
.gyermek {szélesség : 650 képpont ;
magasság : 200 képpont ;
háttér : rgb ( 0 , 255 , 42 ) ;
}
A megadott kód eredménye az alábbiakban látható:
3. módszer: Helyezzen el két Divt egymás mellett a CSS-ben float segítségével
A CSS float tulajdonsága egy elem lebegési irányát adja meg. Pontosabban, ez a tulajdonság felhasználható két div egymás mellé helyezésére a CSS-ben.
Szintaxis
A float tulajdonság szintaxisa a következő:
lebegés: nincs|balra|jobbraItt található a fent megadott értékek leírása:
- egyik sem: A lebegés korlátozására szolgál.
- bal: A bal oldalon lévő elemek lebegtetésére szolgál.
- jobb: A jobb oldalon lévő elemek lebegtetésére szolgál.
Térjünk át a div egymás mellé helyezésének példájára.
Példa
Most két div elemet hozunk létre a
címkén belül, és az osztály nevét a következőképpen rendeljük hozzá div1 ” és „ div2 ”: < test >< div osztály = 'div1' >< / div >
< div osztály = 'div2' >< / div >
< / test >
Ezután használja a „ .div1 ” és „ .div2 ” a HTML szakaszban hozzáadott tárolók eléréséhez. Mindkét divet ugyanabban az osztályban fogjuk használni, mert a tulajdonságok és értékek, amelyeket mindkettőhöz rendelünk, ugyanazok.
Ezután a float tulajdonság értékét a következőképpen rendeljük hozzá bal ', és állítsa be a div szélességét és magasságát ' ötven% ” és „ 40% ”. Használjuk a box-sizing tulajdonságot is, és értékét a következőképpen állítjuk be: border-box ”. Ezenkívül állítsa be a div háttérszínét ' rgb(7; 255; 222) ', és állítsa be a határtulajdon értékeit a következőre: ' 3 képpont ”, „ szilárd ”, és „ rgb(255; 0; 255) ”:
.div1 , .div2 {úszó : bal ;
szélesség : ötven% ;
magasság : 40% ;
doboz-méretezés : border-box ;
háttér : rgb ( 7 , 255 , 222 ) ;
határ : 3 képpont szilárd rgb ( 255 , 0 , 255 ) ;
}
Jegyzet: Két div elemet egymás mellé helyezhet a box-sizing tulajdonság és a border tulajdonság használata nélkül, ha beállítja a divek különböző háttérszíneit.
Miután implementálta a fenti kódot, futtassa le a HTML-fájlt, és nézze meg az eredményt:
Jegyzet: Ha hézagot szeretne létrehozni két div között, először hozzon létre egy másik divet, majd ennek megfelelően állítsa be a div margóját.
Következtetés
A divek egymás mellé helyezhetők a CSS három különböző módszerével, amelyek a „ Flex ” és „ rács ' a megjelenítési tulajdonság értékei és a ' úszó ' ingatlan. Mindegyik módszer hatékonyan működik; azonban bármelyiket felhasználhatja igényeinknek megfelelően. Ebben az útmutatóban három módszert tárgyaltunk a div egymás mellé helyezésére CSS használatával, és ehhez kapcsolódó példákat mutattunk be.