În acest articol, vom discuta fiecare dintre abordările menționate una câte una și vom oferi un exemplu potrivit pentru fiecare metodă.
Deci sa începem!
Metoda 1: plasați două div-uri una lângă alta în CSS folosind grila
CSS „ grilă Aspectul permite utilizatorului să plaseze două sau mai multe două div-uri una lângă alta. Practic, grila este o valoare a proprietății de afișare utilizată pentru a crea un aspect format din rânduri și coloane.
Sintaxă
Sintaxa proprietății de afișare cu aspect grilă este dată mai jos:
afișaj: grilă
Acum, să vedem un exemplu legat de plasarea a două div-uri una lângă alta în CSS folosind aspectul grilei.
Exemplu
Aici, vom crea două div-uri copii în interiorul div-ului părinte, având numele clasei ca „ mamă ”, “ copil ' și ' copil ”:
< div clasă = 'mamă' >< div clasă = 'copil' >< / div >
< div clasă = 'copil' >< / div >
< / div >
În continuare, în secțiunea CSS, utilizați „ .mamă ” pentru a accesa div-ul părinte și a seta valoarea proprietății de afișare ca „ grilă ”. Apoi, setați fracția folosind „ grilă-șablon-coloane ” proprietate pentru a crea spațiu pentru coloane. În cazul nostru, vom seta fracțiile ca „ 1fr ' și ' 1fr ”, ceea ce înseamnă că ambele div-uri au dobândit spațiu egal. În plus, vom seta decalajul dintre două coloane folosind proprietatea column-gap și vom stabili valoarea acesteia ca „ 25px ”.
CSS:
.mamă {afişa : grilă ;
grilă-șablon-coloane : 1fr 1fr ;
coloană-decalaj : 25px ;
}
În pasul următor, folosim „ .copil ” pentru a accesa ambele div copil și pentru a seta înălțimea div-urilor ca „ 250px ” și setați culoarea de fundal ca „ rgb(253, 5, 109) ”:
.copil {înălţime : 250px ;
fundal : rgb ( 253 , 5 , 109 ) ;
}
Aceasta va arăta următorul rezultat:
Să trecem la o altă metodă de a plasa div unul lângă altul
Metoda 2: Plasați două div-uri una lângă alta în CSS folosind flex
„ contracta ” este valoarea proprietății de afișare care permite plasarea a două div-uri una lângă alta. Această proprietate este utilizată pentru a seta o lungime flexibilă pentru elementul flexibil. Acesta micșorează sau crește elementul flexibil pentru a se potrivi în containerul său.
Sintaxă
Sintaxa proprietății de afișare cu flex este dată mai jos:
display: flex;Să trecem la exemplu pentru a înțelege conceptul enunțat.
Exemplu
Vom lua în considerare același fișier HTML și vom aplica „ contracta ” la containerul părinte. Aici, vom seta valoarea proprietății de afișare ca flex și vom seta decalajul dintre div-urile copil ca „ 10px ”:
.mamă {afişa : contracta ;
decalaj : 10px ;
}
După aceea, setați lățimea, înălțimea și culoarea de fundal a div-ului ca „ 650px ”, “ 200px ', și „rgb(0, 255, 42) ”, respectiv:
.copil {lăţime : 650px ;
înălţime : 200px ;
fundal : rgb ( 0 , 255 , 42 ) ;
}
Rezultatul codului dat este prezentat mai jos:
Metoda 3: Plasați două div-uri una lângă alta în CSS folosind float
Proprietatea CSS float specifică direcția de plutire a unui element. Mai precis, această proprietate poate fi utilizată pentru a plasa două div-uri una lângă alta în CSS.
Sintaxă
Sintaxa proprietății float este:
float: niciunul|stânga|dreaptaIată descrierea valorilor de mai sus:
- nici unul: Este folosit pentru a restricționa plutirea.
- stânga: Este folosit pentru a pluti elemente pe partea stângă.
- dreapta: Este folosit pentru a pluti elemente pe partea dreaptă.
Să trecem la exemplul de a plasa div unul lângă altul.
Exemplu
Acum, vom crea două div-uri în interiorul etichetei
și vom atribui numele clasei ca „ div1 ' și ' div2 ”: < corp >< div clasă = 'div1' >< / div >
< div clasă = 'div2' >< / div >
< / corp >
Apoi, folosiți „ .div1 ' și ' .div2 ” pentru a accesa containerele adăugate în secțiunea HTML. Vom folosi ambele div-uri în aceeași clasă, deoarece proprietățile și valorile pe care le vom atribui ambelor sunt aceleași.
Apoi, atribuim valoarea proprietății float ca „ stânga ” și setați lățimea și înălțimea div-ului ca „ cincizeci% ' și ' 40% ”. De asemenea, folosim proprietatea box-sizing și setăm valoarea acesteia ca „ cutie-chenar ”. Mai mult, setați culoarea de fundal a div-ului ca „ rgb(7, 255, 222) ” și setați valorile proprietății de frontieră ca „ 3px ”, “ solid ', și ' rgb(255, 0, 255) ”:
.div1 , .div2 {pluti : stânga ;
lăţime : cincizeci% ;
înălţime : 40% ;
dimensionarea cutiei : cutie-chenar ;
fundal : rgb ( 7 , 255 , 222 ) ;
frontieră : 3px solid rgb ( 255 , 0 , 255 ) ;
}
Notă: Puteți plasa două div-uri unul lângă celălalt, fără a utiliza proprietatea de dimensiune a casetei și proprietatea chenar prin setarea diferitelor culori de fundal ale div-urilor.
Odată ce implementați codul de mai sus, execută fișierul HTML și vedeți rezultatul:
Notă: Pentru a crea un decalaj între două div-uri, creați mai întâi un alt div și apoi setați marginea div-ului în consecință.
Concluzie
Div-urile pot fi plasate unul lângă altul utilizând trei metode diferite de CSS, care sunt „ contracta ' și ' grilă ” valorile proprietății de afișare și „ pluti ” proprietate. Fiecare dintre metode funcționează eficient; cu toate acestea, puteți utiliza oricare dintre ele conform cerințelor noastre. În acest ghid, am discutat trei metode de a plasa div unul lângă altul folosind CSS și am oferit exemple înrudite.