5 лучших способов отобразить два div рядом с помощью CSS - TechBoxWeb

Блог

В HTML есть два типа встроенного элемента и блочного элемента: встроенные элементы могут размещать элементы рядом друг с другом, но они не поддерживают свойства высоты и ширины по умолчанию, а блочные элементы поддерживают свойство ширины и высоты по умолчанию, но мы не можем разместить элементы блока, такие как два div, рядом



Итак, здесь мы можем увидеть, как мы можем заставить его работать

мы увидим, как div можно разместить рядом друг с другом 5 различными способами



  • дисплей: встроенный блок (традиционный способ)
  • CSS метод Flexbox
  • CSS метод сетки
  • display: table метод
  • плавающее свойство

[mc4wp_form id = 314]

Использование display: inline-block

дисплей: встроенный блок свойство помогает разместить элементы блока рядом друг с другом



Но нам нужно добавить свойство дополнительной ширины к элементу блока, потому что элемент блока по умолчанию имеет ширину 100%.

например.

// css

.element { display: inline-block; width: 100px; height: 100px; background: #ce8888; }

и вывод будет

пожалуйста, проверьте пример здесь

структуры данных и алгоритмы проекта

Использование flexbox

Flexbox это современный способ разработки макета веб-страницы, и flexbox не является единственным свойством, его полный модуль имеет ряд функций

давайте посмотрим, как мы можем выровнять div рядом друг с другом с помощью flexbox

// html файл

// css файл

.container { display: flex; } .item { background: #ce8888; flex-basis: 100px; height: 100px; margin: 5px; }

//выход

дисплей: гибкий свойство, присвоенное контейнеру, которое делает дочерний элемент в контексте гибкости и выравнивает div рядом друг с другом

В приведенном выше примере вы можете видеть, что мы использовали свойство flex-basic, которое используется для задания минимальной ширины элемента. Чтобы подробнее разобраться во флексбоксе, пожалуйста Проверь это

пожалуйста, найдите демо здесь

Использование CSS-сетки

CSS-сетка - еще один отличный подход к дизайну веб-страницы, и это полный модуль, который имеет ряд функций

Давайте посмотрим, как мы можем отображать div бок о бок с помощью CSS-сетки

// HTML

как выключить истинный ключ
Grid Example

// css файл

.container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px; grid-column-gap: 5px; } .item { background: #ce8888; }

и вывод будет

имущество дисплей: сетка включает структуру макета сетки

В файле CSS свойство grid-template-columns помогает разделить страницу на количество столбцов, мы дали 100 пикселей два раза, тогда будет создано два столбца

Это очень большой модуль, думаю, вам стоит проверить это сначала подробно, а затем только использовать его.

ответный ввод пароля

Найти демо здесь

Использование таблицы отображения

display: table - альтернатива для

ярлык

давайте посмотрим, как мы можем добиться отображения div бок о бок, используя дисплей: таблица имущество

// html файл

// css файл

.container { display: table; width: 20%; } .table-row { display: table-row; height: 100px; } .table-cell { border: 1px solid; background: #ce8888; display: table-cell; padding: 2px; }

и вывод будет

пожалуйста, найдите демо здесь

вы можете закодировать пример выше display: table с использованием html стол тег также как показано ниже

// html файл

// css файл

.container { display: table; width: 20%; } .table-row { display: table-row; height: 100px; } .table-cell { border: 1px solid; background: #ce8888; display: table-cell; padding: 2px; }

и вывод будет

Использование свойства float

В float Свойство CSS помещает элемент слева или справа от своего контейнера, позволяя тексту и встроенным элементам обтекать его. Элемент удаляется из обычного потока страницы, но по-прежнему остается частью потока.

давайте посмотрим, как мы можем отображать div бок о бок с помощью float

// html файл

// css файл

.element { float: left; width: 100px; height: 100px; background: #ce8888; margin: 5px }

и вывод будет

Пожалуйста, найдите демо здесь

Заключение:

Есть несколько способов выровнять div рядом друг с другом, но вопрос в том, какой из них лучше.

Это полностью зависит от требований

Flexbox и CSS-сетка - это современные способы создания макета для веб-страницы, и это полный модуль, который имеет ряд функций. Я рекомендую flexbox или CSS-сетку, если необходимо разметить всю страницу.

реагировать на родную верхнюю панель

Если у вас минимальные требования, то display: inline-block - идеальный вариант.

Этот пост был впервые опубликован TechBoxWeb

#css # html5

techboxweb.com

5 лучших способов отобразить два div рядом с помощью CSS - TechBoxWeb

Всегда сложно найти, какой метод лучше всего отображать div рядом друг с другом. Вот 5 лучших способов показать div рядом