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 три и регулировка ширины также может быть добавлена.