В этой статье мы обсудим каждый из упомянутых подходов один за другим и предоставим подходящий пример каждого метода.
Итак, приступим!
Способ 1. Разместите два элемента Div рядом друг с другом в CSS, используя сетку
CSS « сетка ” макет позволяет пользователю размещать два или более двух div рядом друг с другом. По сути, сетка — это значение свойства отображения, используемого для создания макета, состоящего из строк и столбцов.
Синтаксис
Синтаксис свойства отображения с макетом сетки приведен ниже:
дисплей: сетка
Теперь давайте рассмотрим пример, связанный с размещением двух div рядом в CSS с использованием макета сетки.
Пример
Здесь мы создадим два дочерних div внутри родительского div с именами классов как « родитель », « ребенок ' а также ' ребенок ”:
< див учебный класс знак равно 'родитель' >< див учебный класс знак равно 'ребенок' >< / див >
< див учебный класс знак равно 'ребенок' >< / див >
< / див >
Далее в разделе CSS используйте « .родитель », чтобы получить доступ к родительскому div и установить значение свойства display как « сетка ». Далее установите дробь с помощью кнопки « сетка-шаблон-столбцы », чтобы создать пространство для столбцов. В нашем случае мы зададим дроби как « 1 франк ' а также ' 1 франк ”, что означает, что оба элемента div заняли одинаковое место. Кроме того, мы установим промежуток между двумя столбцами с помощью свойства column-gap и установим его значение как « 25 пикселей ».
CSS:
.родитель {отображать : сетка ;
сетка-шаблон-столбцы : 1фр 1фр ;
разрыв столбца : 25 пикселей ;
}
На следующем шаге мы используем « .ребенок », чтобы получить доступ к обоим дочерним div и установить высоту div как « 250 пикселей ” и установите цвет фона как “ RGB(253, 5, 109) ”:
.ребенок {высота : 250 пикселей ;
фон : RGB ( 253 , 5 , 109 ) ;
}
Это покажет следующий результат:
Давайте перейдем к другому способу размещения div рядом.
Способ 2: разместить два элемента Div рядом в CSS с помощью flex
“ сгибаться ” — это значение свойства отображения, которое позволяет размещать два блока div рядом. Это свойство используется для установки гибкой длины гибкого элемента. Он сжимает или увеличивает гибкий элемент, чтобы он поместился в его контейнере.
Синтаксис
Синтаксис свойства display с flex приведен ниже:
дисплей: гибкий;Давайте перейдем к примеру, чтобы понять изложенную концепцию.
Пример
Мы рассмотрим тот же HTML-файл и применим « сгибаться » в родительский контейнер. Здесь мы установим значение свойства display как flex и установим промежуток между дочерними элементами div как « 10 пикселей ”:
.родитель {отображать : сгибаться ;
зазор : 10 пикселей ;
}
После этого установите ширину, высоту и цвет фона div как « 650 пикселей », « 200 пикселей ', а также «rgb(0, 255, 42) ', соответственно:
.ребенок {ширина : 650 пикселей ;
высота : 200 пикселей ;
фон : RGB ( 0 , 255 , 42 ) ;
}
Результат данного кода приведен ниже:
Способ 3. Разместите два элемента Div рядом друг с другом в CSS с помощью float
Свойство CSS float указывает плавающее направление элемента. В частности, это свойство можно использовать для размещения двух блоков div рядом друг с другом в CSS.
Синтаксис
Синтаксис свойства float:
поплавок: нет | влево | вправоВот описание приведенных выше значений:
- никто: Он используется для ограничения плавания.
- оставил: Он используется для размещения элементов слева.
- Правильно: Он используется для плавания элементов с правой стороны.
Давайте перейдем к примеру размещения div рядом.
Пример
Теперь мы создадим два div внутри тега
и назначим имя класса как « div1 ' а также ' раздел 2 ”: < тело >< див учебный класс знак равно 'дел1' >< / див >
< див учебный класс знак равно 'дел2' >< / див >
< / тело >
Затем используйте « .div1 ' а также ' .div2 », чтобы получить доступ к контейнерам, добавленным в разделе HTML. Мы будем использовать оба элемента div в одном классе, потому что свойства и значения, которые мы собираемся присвоить обоим, одинаковы.
Затем мы присваиваем значение свойства float как « оставил ” и установите ширину и высоту div как “ 50% ' а также ' 40% ». Мы также используем свойство box-sizing и устанавливаем его значение как « пограничный ящик ». Кроме того, установите цвет фона div как « RGB(7, 255, 222) ” и установите значения свойства границы как “ 3 пикселя », « твердый ', а также ' RGB(255, 0, 255) ”:
.div1 , .div2 {плавать : оставил ;
ширина : 50% ;
высота : 40% ;
размер коробки : пограничный ящик ;
фон : RGB ( 7 , 255 , 222 ) ;
граница : 3 пикселя твердый RGB ( 255 , 0 , 255 ) ;
}
Примечание: Вы можете разместить два элемента div рядом, не используя свойство box-sizing и свойство границы, установив разные цвета фона элементов div.
После того, как вы реализуете приведенный выше код, запустите файл HTML и посмотрите результат:
Примечание: Чтобы создать промежуток между двумя элементами div, сначала создайте еще один элемент div, а затем установите соответствующее поле для элемента div.
Вывод
Разделы Div можно размещать рядом с помощью трех различных методов CSS, а именно: сгибаться ' а также ' сетка ' значения свойства display и ' плавать ' имущество. Каждый из методов работает эффективно; однако вы можете использовать любой из них в соответствии с нашими требованиями. В этом руководстве мы обсудили три метода размещения div рядом с помощью CSS и предоставили соответствующие примеры.