Содержание
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 и настройка ширины.
