V tem članku bomo obravnavali vsakega od omenjenih pristopov enega za drugim in podali ustrezen primer vsake metode.
Torej, začnimo!
1. način: Postavite dva diva enega ob drugega v CSS z uporabo mreže
CSS ' mreža ” postavitev omogoča uporabniku, da enega ob drugem postavi dva ali več dveh elementov div. V bistvu je mreža vrednost lastnosti prikaza, ki se uporablja za ustvarjanje postavitve, sestavljene iz vrstic in stolpcev.
Sintaksa
Sintaksa lastnosti prikaza z mrežno postavitvijo je podana spodaj:
prikaz: mreža
Zdaj pa si oglejmo primer, povezan s postavitvijo dveh elementov div enega poleg drugega v CSS z uporabo mrežne postavitve.
Primer
Tukaj bomo ustvarili dva podrejena diva znotraj nadrejenega diva z imeni razredov kot ' starš ”, “ otrok « in » otrok ”:
< div razred = 'starš' >< div razred = 'otrok' >< / div >
< div razred = 'otrok' >< / div >
< / div >
Nato v razdelku CSS uporabite » .starš « za dostop do nadrejenega diva in nastavite vrednost lastnosti prikaza kot » mreža ”. Nato nastavite ulomek z uporabo ' mreža-predloga-stolpci ” za ustvarjanje prostora za stolpce. V našem primeru bomo ulomke nastavili kot ' 1fr « in » 1fr «, kar pomeni, da sta oba diva pridobila enak prostor. Poleg tega bomo nastavili vrzel med dvema stolpcema z lastnostjo column-gap in njeno vrednost nastavili kot ' 25 slikovnih pik ”.
CSS:
.starš {zaslon : mreža ;
mreža-predloga-stolpci : 1fr 1fr ;
vrzel v stolpcu : 25 slikovnih pik ;
}
V naslednjem koraku uporabimo » .otrok « za dostop do obeh podrejenih divov in nastavitev višine divov kot » 250 slikovnih pik « in nastavite barvo ozadja kot » rgb(253, 5, 109) ”:
.otrok {višina : 250 slikovnih pik ;
ozadje : rgb ( 253 , 5 , 109 ) ;
}
To bo pokazalo naslednji rezultat:
Preidimo na drugo metodo, da postavimo div enega ob drugega
2. način: Postavite dva diva enega poleg drugega v CSS z uporabo flex
' flex ” je vrednost lastnosti prikaza, ki omogoča postavitev dveh elementov div enega poleg drugega. Ta lastnost se uporablja za nastavitev prilagodljive dolžine za prilagodljiv element. Zmanjša ali poveča flex element, da se prilega v svojo posodo.
Sintaksa
Sintaksa lastnosti prikaza s flex je podana spodaj:
zaslon: flex;Pojdimo na primer, da bi razumeli navedeni koncept.
Primer
Upoštevali bomo isto datoteko HTML in uporabili » flex ” v nadrejeni vsebnik. Tukaj bomo nastavili vrednost lastnosti prikaza kot flex in nastavili vrzel med podrejenimi divi kot ' 10 slikovnih pik ”:
.starš {zaslon : flex ;
vrzel : 10 slikovnih pik ;
}
Po tem nastavite širino, višino in barvo ozadja diva kot ' 650 slikovnih pik ”, “ 200 slikovnih pik «, in “rgb(0, 255, 42) «, oziroma:
.otrok {premer : 650 slikovnih pik ;
višina : 200 slikovnih pik ;
ozadje : rgb ( 0 , 255 , 42 ) ;
}
Rezultat dane kode je podan spodaj:
3. način: Postavite dva diva enega poleg drugega v CSS z uporabo float
Lastnost CSS float določa lebdečo smer elementa. Natančneje, to lastnost je mogoče uporabiti za postavitev dveh elementov div enega poleg drugega v CSS.
Sintaksa
Sintaksa lastnosti float je:
float: nič|levo|desnoTukaj je opis zgoraj navedenih vrednosti:
- nič: Uporablja se za omejitev lebdenja.
- levo: Uporablja se za lebdenje elementov na levi strani.
- prav: Uporablja se za lebdenje elementov na desni strani.
Preidimo na primer postavitve div enega ob drugem.
Primer
Zdaj bomo ustvarili dva diva znotraj oznake
in dodelili ime razreda kot “ div1 « in » div2 ”: < telo >< div razred = 'div1' >< / div >
< div razred = 'div2' >< / div >
< / telo >
Nato uporabite » .div1 « in » .div2 ” za dostop do vsebnikov, dodanih v razdelku HTML. Oba diva bomo uporabili v istem razredu, ker so lastnosti in vrednosti, ki jih bomo dodelili obema, enake.
Nato dodelimo vrednost lastnosti float kot ' levo « in nastavite širino in višino diva kot » petdeset % « in » 40 % ”. Uporabljamo tudi lastnost box-sizing in nastavimo njeno vrednost kot ' border-box ”. Poleg tega nastavite barvo ozadja diva kot ' rgb(7, 255, 222) « in nastavite vrednosti lastnosti meje kot » 3px ”, “ trdna «, in » rgb(255, 0, 255) ”:
.div1 , .div2 {lebdi : levo ;
premer : petdeset % ;
višina : 40 % ;
velikost škatle : border-box ;
ozadje : rgb ( 7 , 255 , 222 ) ;
meja : 3px trdna rgb ( 255 , 0 , 255 ) ;
}
Opomba: Dva elementa div lahko postavite enega poleg drugega, ne da bi uporabili lastnost velikosti škatle in lastnost obrobe, tako da nastavite različne barve ozadja elementov div.
Ko implementirate zgornjo kodo, izvedete datoteko HTML in si oglejte rezultat:
Opomba: Če želite ustvariti vrzel med dvema divoma, najprej ustvarite še en div in nato ustrezno nastavite rob diva.
Zaključek
Dive je mogoče postaviti drug poleg drugega z uporabo treh različnih metod CSS, ki so » flex « in » mreža ' vrednosti lastnosti prikaza in ' lebdi ” lastnina. Vsaka od metod deluje učinkovito; vendar pa lahko uporabite katerega koli od njih v skladu z našimi zahtevami. V tem priročniku smo razpravljali o treh metodah za postavitev div enega ob drugega z uporabo CSS in podali povezane primere.