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

  1. <Div> поведение по умолчанию
  2. HTML код
  3. Установите размер и сделайте встроенный
  4. HTML код
  5. Создание трехколоночного div
  6. HTML код
  7. HTML код

Обновлено: 04.02.2009 от Computer Hope Обновлено: 04

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