U ovom ćemo članku razmotriti svaki od spomenutih pristupa jedan po jedan i pružiti odgovarajući primjer svake metode.
Dakle, počnimo!
Metoda 1: Postavite dva Div-a jedan pored drugog u CSS pomoću mreže
CSS ' rešetka ” raspored omogućuje korisniku postavljanje dva ili više divova jedan pored drugog. U osnovi, rešetka je vrijednost svojstva prikaza koja se koristi za stvaranje izgleda koji se sastoji od redaka i stupaca.
Sintaksa
Sintaksa svojstva prikaza s rasporedom mreže data je u nastavku:
prikaz: rešetka
Pogledajmo sada primjer koji se odnosi na postavljanje dva diva jedan pored drugoga u CSS-u pomoću rasporeda rešetke.
Primjer
Ovdje ćemo stvoriti dva djeteta diva unutar nadređenog diva, s imenima klasa kao ' roditelj ”, “ dijete ' i ' dijete ”:
< div razreda = 'roditelj' >< div razreda = 'dijete' >< / div >
< div razreda = 'dijete' >< / div >
< / div >
Zatim u odjeljku CSS upotrijebite ' .roditelj ' za pristup nadređenom divu i postavljanje vrijednosti svojstva prikaza kao ' rešetka ”. Zatim postavite razlomak pomoću ' rešetka-predložak-stupci ” za stvaranje prostora za stupce. U našem slučaju, razlomke ćemo postaviti kao ' 1fr ' i ' 1fr “, što znači da su oba diva dobila jednak prostor. Nadalje, postavit ćemo razmak između dva stupca pomoću svojstva column-gap i postaviti njegovu vrijednost kao ' 25 px ”.
CSS:
.roditelj {prikaz : rešetka ;
rešetka-predložak-stupci : 1fr 1fr ;
stupac-gap : 25 px ;
}
U sljedećem koraku koristimo ' .dijete ” za pristup objema podređenim divovima i postavljanje visine divova kao “ 250 px ' i postavite boju pozadine kao ' rgb(253, 5, 109) ”:
.dijete {visina : 250 px ;
pozadina : rgb ( 253 , 5 , 109 ) ;
}
To će pokazati sljedeći ishod:
Prijeđimo na drugu metodu za postavljanje diva jedan pored drugog
Metoda 2: Postavite dva Div-a jedan pored drugog u CSS koristeći flex
' savijati ” je vrijednost svojstva prikaza koja omogućuje postavljanje dva diva jedan pored drugog. Ovo se svojstvo koristi za postavljanje fleksibilne duljine za fleksibilnu stavku. Smanjuje ili povećava savitljivu stavku da stane u spremnik.
Sintaksa
Sintaksa svojstva prikaza s flexom dana je u nastavku:
zaslon: savitljiv;Prijeđimo na primjer kako bismo razumjeli navedeni koncept.
Primjer
Razmotrit ćemo istu HTML datoteku i primijeniti ' savijati ” u nadređeni spremnik. Ovdje ćemo postaviti vrijednost svojstva prikaza kao flex i postaviti razmak između podređenih divova kao ' 10 px ”:
.roditelj {prikaz : savijati ;
praznina : 10 px ;
}
Nakon toga postavite širinu, visinu i boju pozadine diva kao ' 650 px ”, “ 200 px ”, i “rgb(0, 255, 42) “, odnosno:
.dijete {širina : 650 px ;
visina : 200 px ;
pozadina : rgb ( 0 , 255 , 42 ) ;
}
Ishod zadanog koda dan je u nastavku:
Metoda 3: Postavite dva Diva jedan pored drugog u CSS koristeći float
CSS svojstvo float određuje pomični smjer elementa. Točnije, ovo se svojstvo može koristiti za postavljanje dva diva jedan pored drugog u CSS.
Sintaksa
Sintaksa svojstva float je:
plovak: ništa|lijevo|desnoOvdje je opis za gore navedene vrijednosti:
- nijedan: Koristi se za ograničavanje plutanja.
- lijevo: Koristi se za plutanje elemenata s lijeve strane.
- pravo: Koristi se za plutanje elemenata s desne strane.
Prijeđimo na primjer postavljanja diva jedan pored drugog.
Primjer
Sada ćemo stvoriti dva diva unutar oznake
i dodijeliti naziv klase kao “ div1 ' i ' div2 ”: < tijelo >< div razreda = 'div1' >< / div >
< div razreda = 'div2' >< / div >
< / tijelo >
Zatim upotrijebite ' .div1 ' i ' .div2 ” za pristup spremnicima dodanim u odjeljku HTML. Koristit ćemo oba diva u istoj klasi jer su svojstva i vrijednosti koje ćemo im dodijeliti isti.
Zatim dodjeljujemo vrijednost svojstva float kao ' lijevo ' i postavite širinu i visinu diva kao ' pedeset% ' i ' 40% ”. Također koristimo svojstvo box-sizing i postavljamo njegovu vrijednost kao ' rubni okvir ”. Nadalje, postavite boju pozadine diva kao ' rgb(7, 255, 222) ' i postavite vrijednosti svojstva granice kao ' 3 px ”, “ čvrsta ', i ' rgb(255, 0, 255) ”:
.div1 , .div2 {plutati : lijevo ;
širina : pedeset% ;
visina : 40% ;
dimenzioniranje kutije : rubni okvir ;
pozadina : rgb ( 7 , 255 , 222 ) ;
granica : 3 px čvrsta rgb ( 255 , 0 , 255 ) ;
}
Bilješka: Možete postaviti dva diva jedan pokraj drugoga bez korištenja svojstva okvira i ruba postavljanjem različitih boja pozadine divova.
Nakon što implementirate gornji kôd, izvršava se HTML datoteka i vidite rezultat:
Bilješka: Da biste stvorili razmak između dva diva, prvo stvorite drugi div, a zatim postavite marginu diva u skladu s tim.
Zaključak
Divovi se mogu postaviti jedan pored drugog pomoću tri različite metode CSS-a, a to su ' savijati ' i ' rešetka ' vrijednosti svojstva prikaza i ' plutati ” vlasništvo. Svaka od metoda djeluje učinkovito; međutim, možete koristiti bilo koji od njih prema našim zahtjevima. U ovom smo vodiču raspravljali o tri metode postavljanja diva jedan pored drugog pomoću CSS-a i dali povezane primjere.