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

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

HTML-тег div

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

Кончик

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

Примечание

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

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

Дефолт <div> поведение

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

Div один
Div второй

HTML код

<стиль div ="отступ: 50 пикселей; цвет фона: # BCC6CC;">Div один</ div> <стиль div ="отступ: 50 пикселей; цвет фона: # Оптим4E2;">Div второй</ div>

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

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

Div один
Div второй

HTML код

<стиль div ="отступ: 50 пикселей; цвет фона: # BCC6CC; ширина: 100 пикселей; дисплей: встроенный блок;">Div один</ div> <стиль div ="отступ: 50 пикселей; фоновый цвет: # Prime4E2; дисплей: встроенный блок;">Div второй</ div>

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

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

Div один
Div второй
Div три

HTML код

<стиль div ="отступ: 50 пикселей; цвет фона: # BCC6CC; дисплей: встроенный блок;">Div один</ div> <стиль div ="отступ: 50 пикселей; фоновый цвет: # Prime4E2; дисплей: встроенный блок;">Div второй</ div> <стиль div ="отступ: 50 пикселей; цвет фона: # 98AFC7; дисплей: встроенный блок; нижнее поле: 2em;">Div три</ div>

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

Div один
Div три
Div второй

HTML код

<стиль div ="background-color: # BCC6CC; float: left; width: 200px; padding: 50px">Div One</ div> <стиль div ="background-color: # 98AFC7; float: right; padding: 50px">РАЗДЕЛ ТРЕТИЙ</ div> <стиль div ="background-color: # Prime4E2; float: none; overflow: hidden; padding: 50px">Div Two</ div>
Кончик

Хотя приведенный выше пример столбца с тремя div является адаптивным, дополнительная настройка, такая как скрытие Div три и регулировка ширины также может быть добавлена.