Как предотвратить разбиение div на следующую строку

HTML-тег div

HTML
or Division — это элемент уровня блока, который не предназначен для отображения рядом с ним каких-либо элементов HTML, если его поведение по умолчанию не изменено. Ниже приведены различные способы предотвращения перехода элемента div на следующую строку.

Чаевые

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

Заметка

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

Ниже мы покажем элементы div в разных цветах, чтобы проиллюстрировать, как много места занимает элемент div и где он расположен на экране.

По умолчанию
поведение

Ниже приведен пример поведения div по умолчанию для блочного элемента Div one, занимающего первую строку содержащего его элемента, за которым следует второй Div два.

Див один
Div два

HTML код

Див один
Div два

Установите размер и сделайте встроенный

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

Див один
Div два

HTML код

Див один
Div два

Создание трехколоночного div

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

Див один
Div два
Див три

HTML код

Див один
Div два
Див три

Конечно, если вы хотите, чтобы div занимал 100% содержащего элемента, это становится немного сложнее. Ниже приведен один пример того, как вы можете создать три div рядом друг с другом, которые занимают 100% элемента. В приведенном ниже примере вместо того, чтобы хранить все элементы div в одной строке с помощью inline-block, мы плаваем в левом и правом элементах div.

Див один
Див три
Div два

HTML код

Div One
DIV THREE
Div Two

Чаевые

Хотя приведенный выше пример столбца с тремя элементами div является отзывчивым, к стилю также может быть добавлена ​​дополнительная настройка, такая как скрытие элемента Div 3 и настройка ширины.

Ссылка на основную публикацию