Плавная ширина с равным интервалом div с использованием CSS
Есть два метода создания равномерных элементов «div» с помощью CSS.
Метод 1: использование техники Flexbox в CSS
Подход: мы можем создать контейнер, а затем установить для свойства display значение flex . Создает Flexbox. Теперь мы можем применить свойства flexbox к элементам контейнера. Итак, мы установим для свойства justify-content значение space-between для создания элементов «div» одинакового размера.
Синтаксис:
.container {
дисплей: гибкий;
justify-content: пробел между;
}Пример 1. Следующий код иллюстрирует вышеуказанную концепцию.
Выход:
Элементы div с равным интервалом, использующие свойство flex
Метод 2: использование свойства сетки в CSS
Подход: Сначала мы устанавливаем отображение контейнера в виде сетки . Затем используйте свойство gap в CSS, чтобы создать элементы «div» с равным интервалом.
Синтаксис:
.container {
дисплей: сетка;
разрыв: 1бэр;
}Пример 2: Следующий код иллюстрирует вышеуказанную концепцию.
HTML
<!DOCTYPE html>< html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < style > #container { /* Using the grid property */ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* Making equal spaced divs */ gap: 1rem; } .box { border: 4px solid black; background-color: red; height: 30vh; } </ style ></ head > < body > < div id = "container" > < div class = "box" >Box1</ div > < div class = "box" >Box2</ div > < div class = "box" >Box3</ div > < div class = "box" >Box4</ div > </ div ></ body > </ html > |
Выход:
