Как расположить div справа

Два блока рядом друг с другом CSS

При формировании той или иной страницы на сайте иногда возникает необходимость создать колонки с тем или иным содержимым, которые находились рядом друг с другом. По умолчанию блоки не располагаются рядом друг с другом, а идут по порядку снизу.

Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.

Создание блоков в HTML

Для начала нам нужно создать в HTML два блока на нашей странице:

div id="block1">Текстdiv> div id="block2">Текстdiv>

Оформление блоков DIV рядом друг с другом по горизонтали

Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры:

#block1  float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; > #block2  float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; >

На выходе получим результат, как показано на изображении справа.

float — можно придать значения «left» и «right«, фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.
display: block; — выводит div блоком.

Дополнительные настройки

Остальные параметры носят декоративный характер:

width — задаём размер блокам
border — настраиваем границу блоков
margin — внешние отступы, чтобы блоки не прилипали друг к другу

Примечание

Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.

Статьи по теме CSS

Размер блока
Оформление линий
Оформление таблиц
Выравнивание блока
Два блока рядом
Настройка ссылок
Настройка фона
Настройка шрифта
Отступы
Оформление картинок
Галерея картинок
Оформление кнопок
Оформление списков
Оформление иконок
Курсор в CSS
Навигационная панель
Выпадающее меню
Формы в CSS
Вёрстка шаблона сайта

CSS Flexbox
CSS Grid
Анимации и переходы CSS
Медиа-запросы CSS
CSS-препроцессоры
CSS-фреймворки

Как в bootstrap расположить div блок по правому края div с классом container?

У дочернего блока position: fixed; и при всех попытках разместить его справа блока container например с помощью float:right; Кнопка в блоке перемещается в самый правый край всей страницы а не блока container

  кнопка корзины

.block

Вопрос задан более трёх лет назад
1430 просмотров

Комментировать
Решения вопроса 2

lukoie

jsfiddle сделайте и дайте там больше своего реального кода
класс .pull-right пробовали?
И не указали кстати бутстрап какой.
Если это 4, то попробуйте еще добавить классы .row .justify-content-end

Ответ написан более трёх лет назад
Нравится 1 8 комментариев
AlexAll @AlexAll Автор вопроса

Здравствуйте, у меня бустрап 3 так как не могу 4ртый использовать фреймворк yii2 работает на 3тем. Ваш способ не работает, хотя тут jsfiddle работает https://jsfiddle.net/9obh7cex/

lukoie

AlexAll, естественно, ведь
1 Вы не указали версию, а по дефолту считаем что версия последняя
2 оно и не будет работать в 3 бутстрапе, т.к. классы там от 4го
3 а в жсфидле будет, потому что там подключен последний бутстрап

AlexAll @AlexAll Автор вопроса

lukoie, если просто один блок с float:right не работает. Я думаю последний вариант, это сделать три колонки левую и середину пустой а в праву воткнуть кнопку. а способ с transform: translateX что посоветовали выше работает только от ширины выше 1200 px, так как ширина контейнера фиксированная, хотя можно использовать media

HTML : Разместить DIV внизу другого DIV’а

Задача:
внутри родительсткого разместить другой который должен располагаться справа, внизу.

Решение:
1. родительскому DIV’у обязательно ставим position: absolute или relative
2. диву что внутри ставим position:absolute;bottom:0;right:0;

2021-09-22 18:36 , author абобус

Вы только посетили наш сайт, КОММЕНТИРОВАНИЕ будет доступно через несколько минут.
возможно у Вас отключен javascript, если включен — просто обновите страницу

float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none , элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Синтаксис

float: left | right | none | inherit

Значения

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

    float     Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Результат данного примера показан на рис. 1.

Применение свойства float

Рис. 1. Применение свойства float

Объектная модель

[window.]document.getElementById(» elementID «).style.styleFloat

[window.]document.getElementById(» elementID «).style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .