Как предотвратить разбиение div на следующую строку
- <Div> поведение по умолчанию
- HTML код
- Установите размер и сделайте встроенный
- HTML код
- Создание трехколоночного div
- HTML код
- HTML код
Обновлено: 04.02.2009 от Computer Hope 
HTML <div> или подразделение - это элемент уровня блока, который не предназначен для отображения рядом с ним каких-либо элементов HTML, если его поведение по умолчанию не изменено. Ниже приведены различные способы предотвращения перехода элемента div на следующую строку.
Совет
В зависимости от того, почему вы хотите сломать div, также рассмотрите тег <span> , который является встроенный элемент уровня и не переходит на следующую строку, если его поведение по умолчанию не изменено.
Заметка
Чтобы облегчить использование и понимание этих примеров для всех типов пользователей компьютеров, мы используем атрибут style в div. Если вы собираетесь использовать любой из этих примеров на нескольких страницах, мы настоятельно рекомендуем создать кешируемый CSS файл с настройками стиля в файле.
В наших нижеприведенных примерах мы будем показывать элементы div в разных цветах, чтобы проиллюстрировать, сколько места занимает элемент div и где на экране расположен элемент div.
<Div> поведение по умолчанию
Ниже приведен пример поведения div по умолчанию для блочного элемента Div one, занимающего первую строку содержащего его элемента, за которым следует второй Div два .
Див один
Div два
HTML код
<div style = "padding: 50px; цвет фона: # BCC6CC;"> Div one </ div> <div style = "padding: 50px; цвет фона: # мгнов4E2;"> Div два </ div>
Установите размер и сделайте встроенный
Даже если вы уменьшите размер элемента Div, чтобы освободить место для другого элемента Div, так как они являются блочными элементами, у вас останется место рядом с элементом Div один и элементом Div ниже элемента Div один . Для перемещения элемента div на следующую строку оба элемента div должны иметь настройку отображения встроенного блока, как показано ниже.
Див один
Div два
HTML код
<div style = "padding: 50px; цвет фона: # BCC6CC; ширина: 100px; отображение: встроенный блок;"> Div one </ div> <div style = "padding: 50px; цвет фона: # Ошибка4E2; display: inline-block; "> Div two </ div>
Создание трехколоночного div
Ниже приведены несколько разных примеров трех столбца div. Во-первых, нижеприведенные три столбца div следуют той же идее, что и приведенные выше примеры, за исключением того, что они добавляют div.
Див один
Div два
Див три
HTML код
<div style = "padding: 50px; цвет фона: # BCC6CC; display: inline-block;"> Div one </ div> <div style = "padding: 50px; цвет фона: # Flash4E2; отображение: inline- block; "> Div two </ div> <div style =" padding: 50px; цвет фона: # 98AFC7; отображение: встроенный блок; margin-bottom: 2em; "> Div three </ div>
Конечно, если вы хотите, чтобы div занимал 100% содержащего элемента, это становится немного сложнее. Ниже приведен один пример того, как вы можете создать три div рядом друг с другом, которые занимают 100% элемента. В приведенном ниже примере вместо того, чтобы хранить все элементы div в одной строке с помощью inline-block, мы плаваем в левом и правом элементах div.
Див один
Див три
Div два
HTML код
<div style = "background-color: # BCC6CC; float: left; ширина: 200px; отступ: 50px"> Div One </ div> <div style = "background-color: # 98AFC7; float: right; отступ: 50px "> DIV THREE </ div> <div style =" background-color: # Время4E2; float: нет; переполнение: скрыто; отступ: 50px "> Div Two </ div> Совет
Хотя приведенный выше пример столбца с тремя элементами div является отзывчивым, к стилю также может быть добавлена дополнительная настройка, такая как скрытие элемента Div 3 и настройка ширины.