В тази статия ще обсъдим всеки от споменатите подходи един по един и ще предоставим подходящ пример за всеки метод.
И така, да започваме!
Метод 1: Поставете два Div един до друг в CSS с помощта на мрежа
CSS “ решетка ” оформлението позволява на потребителя да постави два или повече два div един до друг. По принцип мрежата е стойност на свойството display, използвана за създаване на оформление, състоящо се от редове и колони.
Синтаксис
Синтаксисът на свойството дисплей с мрежово оформление е даден по-долу:
дисплей: решетка
Сега нека разгледаме един пример, свързан с поставянето на два div един до друг в CSS с помощта на оформлението на мрежата.
Пример
Тук ще създадем две дъщерни divs вътре в родителския div, имащи имена на класове като „ родител ”, “ дете ' и ' дете ”:
< див клас = 'родител' >< див клас = 'дете' >< / див >
< див клас = 'дете' >< / див >
< / див >
След това в секцията CSS използвайте „ .родител ' за достъп до родителския div и задаване на стойността на свойството за показване като ' решетка ”. След това задайте фракцията с помощта на „ grid-template-colons ”, за да създадете място за колони. В нашия случай ще зададем дроби като „ 1фр ' и ' 1фр ”, което означава, че и двата div са придобили еднакво пространство. Освен това ще зададем празнината между две колони, като използваме свойството column-gap и ще зададем стойността му като „ 25px ”.
CSS:
.родител {дисплей : решетка ;
grid-template-colons : 1fr 1фр ;
колона-пролука : 25px ;
}
В следващата стъпка използваме „ .дете ” за достъп до дъщерния div и задаване на височината на div като „ 250 пиксела ” и задайте цвета на фона като „ rgb(253, 5, 109) ”:
.дете {височина : 250 пиксела ;
заден план : rgb ( 253 , 5 , 109 ) ;
}
Това ще покаже следния резултат:
Нека преминем към друг метод за поставяне на div един до друг
Метод 2: Поставете два Div един до друг в CSS с помощта на flex
„ flex ” е стойността на свойството display, което позволява поставянето на два div един до друг. Това свойство се използва за задаване на гъвкава дължина за гъвкавия елемент. Той свива или увеличава гъвкавия елемент, за да се побере в неговия контейнер.
Синтаксис
Синтаксисът на свойството display с flex е даден по-долу:
дисплей: гъвкав;Нека преминем към примера, за да разберем посочената концепция.
Пример
Ще разгледаме същия HTML файл и ще приложим „ flex ” към родителския контейнер. Тук ще зададем стойността на свойството display като flex и ще зададем празнината между дъщерните div като „ 10px ”:
.родител {дисплей : flex ;
празнина : 10px ;
}
След това задайте ширината, височината и цвета на фона на div като „ 650 пиксела ”, “ 200 пиксела ', и „rgb(0, 255, 42) ”, съответно:
.дете {ширина : 650 пиксела ;
височина : 200 пиксела ;
заден план : rgb ( 0 , 255 , 42 ) ;
}
Резултатът от дадения код е даден по-долу:
Метод 3: Поставете два Div-а един до друг в CSS, като използвате float
Свойството float на CSS указва посоката на плаване на елемент. По-конкретно, това свойство може да се използва за поставяне на два div един до друг в CSS.
Синтаксис
Синтаксисът на свойството float е:
float: няма|ляво|дясноЕто описанието на дадените по-горе стойности:
- нито един: Използва се за ограничаване на плуването.
- наляво: Използва се за плаващи елементи от лявата страна.
- дясно: Използва се за плаващи елементи от дясната страна.
Нека преминем към примера за поставяне на div един до друг.
Пример
Сега ще създадем два div в тага
и ще зададем име на клас като „ div1 ' и ' div2 ”: < тяло >< див клас = 'div1' >< / див >
< див клас = 'div2' >< / див >
< / тяло >
След това използвайте „ .div1 ' и ' .div2 ” за достъп до контейнерите, добавени в секцията HTML. Ще използваме и двата div в един и същи клас, защото свойствата и стойностите, които ще присвоим и на двата, са еднакви.
След това присвояваме стойността на свойството float като „ наляво ” и задайте ширината и височината на div като „ петдесет% ' и ' 40% ”. Ние също използваме свойството box-sizing и задаваме стойността му като „ гранична кутия ”. Освен това задайте цвета на фона на div като „ rgb(7, 255, 222) ” и задайте стойностите на свойството border като „ 3px ”, “ твърдо ', и ' rgb(255, 0, 255) ”:
.div1 , .div2 {плавам : наляво ;
ширина : петдесет% ;
височина : 40% ;
оразмеряване на кутията : гранична кутия ;
заден план : rgb ( 7 , 255 , 222 ) ;
граница : 3px твърдо rgb ( 255 , 0 , 255 ) ;
}
Забележка: Можете да поставите два div-а един до друг, без да използвате свойство box-sizing и border property, като зададете различните фонови цветове на div-ите.
След като внедрите горния код, изпълнете HTML файла и вижте резултата:
Забележка: За да създадете празнина между два div, първо създайте друг div и след това задайте полето на div съответно.
Заключение
Div могат да бъдат поставени един до друг с помощта на три различни метода на CSS, които са „ flex ' и ' решетка ” стойности на свойството display и „ плавам ' Имот. Всеки от методите работи ефективно; въпреки това можете да използвате всеки от тях според нашите изисквания. В това ръководство обсъдихме три метода за поставяне на div един до друг с помощта на CSS и предоставихме свързани примери.