У овом чланку ћемо размотрити сваки од наведених приступа један по један и дати одговарајући пример сваке методе.
Дакле, хајде да почнемо!
Метод 1: Поставите два Дива један поред другог у ЦСС користећи мрежу
ЦСС “ грид ” распоред омогућава кориснику да постави два или више два дива један поред другог. У основи, мрежа је вредност својства приказа која се користи за креирање распореда који се састоји од редова и колона.
Синтакса
Синтакса својства приказа са распоредом мреже је дата у наставку:
приказ: мрежа
Сада, хајде да погледамо пример који се односи на постављање два дива један поред другог у ЦСС користећи распоред мреже.
Пример
Овде ћемо креирати два подређена дива унутар родитељског дива, са називима класа као „ родитељ ”, “ дете ' и ' дете ”:
< див класа = 'родитељ' >< див класа = 'дете' >< / див >
< див класа = 'дете' >< / див >
< / див >
Затим у одељку ЦСС користите „ .родитељ ” да бисте приступили родитељском див и поставили вредност својства приказа као „ грид ”. Затим поставите разломак помоћу „ грид-темплате-колумнс ” за стварање простора за колоне. У нашем случају поставићемо разломке као „ 1фр ' и ' 1фр “, што значи да су оба див-а добила једнак простор. Штавише, поставићемо размак између две колоне користећи својство цолумн-гап и поставити његову вредност као „ 25пк ”.
ЦСС:
.родитељ {приказ : грид ;
грид-темплате-цолумнс : 1фр 1фр ;
колона-размак : 25пк ;
}
У следећем кораку користимо „ .дете ” да бисте приступили и подређеним див-овима и поставили висину див-ова као „ 250пк ” и подесите боју позадине као „ ргб(253, 5, 109) ”:
.дете {висина : 250пк ;
позадини : ргб ( 253 , 5 , 109 ) ;
}
Ово ће показати следећи резултат:
Пређимо на други метод за постављање див један поред другог
Метод 2: Поставите два Дива један поред другог у ЦСС користећи флек
„ флек ” је вредност својства приказа која омогућава постављање два дива један поред другог. Ово својство се користи за постављање флексибилне дужине за флексибилну ставку. Он се скупља или увећава флексибилни предмет како би стао у свој контејнер.
Синтакса
Синтакса својства приказа са флексом је дата у наставку:
дисплеј: флек;Пређимо на пример да бисмо разумели наведени концепт.
Пример
Размотрићемо исту ХТМЛ датотеку и применити „ флек ” у родитељски контејнер. Овде ћемо поставити вредност својства приказа као флек и поставити размак између подређених див-ова као „ 10пк ”:
.родитељ {приказ : флек ;
јаз : 10пк ;
}
Након тога, подесите ширину, висину и боју позадине дива као „ 650пк ”, “ 200пк ', и “ргб(0, 255, 42) ', редом:
.дете {ширина : 650пк ;
висина : 200пк ;
позадини : ргб ( 0 , 255 , 42 ) ;
}
Исход датог кода је дат у наставку:
Метод 3: Поставите два Дива један поред другог у ЦСС користећи флоат
Својство ЦСС флоат специфицира плутајући правац елемента. Тачније, ово својство се може користити за постављање два дива један поред другог у ЦСС.
Синтакса
Синтакса својства флоат је:
флоат: ниједан|лево|десноЕво описа за горе наведене вредности:
- ниједан: Користи се за ограничавање плутања.
- лево: Користи се за плутање елемената на левој страни.
- јел тако: Користи се за плутање елемената на десној страни.
Пређимо на пример постављања див један поред другог.
Пример
Сада ћемо креирати два дива унутар ознаке <боди> и доделити име класе као „ див1 ' и ' див2 ”:
< тело >< див класа = 'див1' >< / див >
< див класа = 'див2' >< / див >
< / тело >
Затим користите „ .див1 ' и ' .див2 ” да бисте приступили контејнерима додатим у ХТМЛ одељку. Користићемо оба дива у истој класи јер су својства и вредности које ћемо доделити оба иста.
Затим, додељујемо вредност својства флоат као „ лево ” и подесите ширину и висину див као „ педесет% ' и ' 40% ”. Такође користимо својство бок-сизинг и постављамо његову вредност као „ гранична кутија ”. Штавише, поставите боју позадине дива као „ ргб(7, 255, 222) ” и поставите вредности својства границе као „ 3пк ”, “ чврст ', и ' ргб(255, 0, 255) ”:
.див1 , .див2 {пловак : лево ;
ширина : педесет% ;
висина : 40% ;
бок-сизинг : гранична кутија ;
позадини : ргб ( 7 , 255 , 222 ) ;
граница : 3пк чврст ргб ( 255 , 0 , 255 ) ;
}
Белешка: Можете поставити два дива један поред другог без коришћења својства величине оквира и својства границе тако што ћете поставити различите боје позадине дивова.
Када имплементирате горњи код, извршава ХТМЛ датотеку и видите резултат:
Белешка: Да бисте направили размак између два дива, прво направите још један див, а затим у складу са тим подесите маргину дива.
Закључак
Дивови се могу поставити један поред другог коришћењем три различите методе ЦСС-а, а то су „ флек ' и ' грид ” вредности својства приказа и „ пловак ' имовина. Свака од метода делује ефикасно; међутим, можете користити било који од њих у складу са нашим захтевима. У овом водичу смо расправљали о три методе за постављање див један поред другог помоћу ЦСС-а и навели повезане примере.