Прижать к правому краю div: Как прижать блок к правому краю? — Хабр Q&A

Leave a Comment / Разное / By /

Bootstrap 4. Flexbox

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

<div>
  <div>
    <div>
      Половинка
    </div>
    <div>
      Половинка
    </div>
  </div>
  
  <div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
  </div>
</div>

Половинка

Половинка

Одна треть

Одна треть

Одна треть

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока.

Остальные распределятся поровну.

<div>
  <div>
    <div>
      (12 - 6) / 2 = 3
    </div>
    <div>
      6 колонок
    </div>
    <div>
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      5 колонок
    </div>
    <div>
      
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      4 колонки
    </div>
    <div>
      
    </div>
  </div>
</div>

(12 — 6) / 2 = 3

6 колонок

(12 — 6) / 2 = 3

5 колонок

4 колонки

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.

<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Слово
    </div>
    <div>
      3 of 3
    </div>
  </div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
  
    <div>
    <div>
      1 of 3
    </div>
    <div>
      Здесь три слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

1 of 3

Слово

3 of 3

1 of 3

Два слова

3 of 3

1 of 3

Здесь три слова

3 of 3

Можно оставить стандартное поведение, не сжимая общую ширину.

1 of 3

Два слова

3 of 3

<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

col

col

col

col

col-8

col-4

<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<div>
  <div>col-8</div>
  <div>col-4</div>
</div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

col-sm-8

col-sm-4

col-sm

col-sm

col-sm

<div>
  <div>col-sm-8</div>
  <div>col-sm-4</div>
</div>
<div>
  <div>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

.col .col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div>
  <div>.col .col-md-8</div>
  <div>.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div>
  <div>.col-6</div>
  <div>.col-6</div>
</div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

По верху

По верху

По верху

По центру

По центру

По центру

По низу

По низу

По низу

<div>
  <div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
  </div>
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  <div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
  </div>
</div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

One of three columns

One of three columns

One of three columns

<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around

, justify-content-between, которые окружают свободно место.

По левому краю

По левому краю

По центру

По центру

По правому краю

По правому краю

Around

Around

Between

Between

<div>
  <div>
    <div>
      По левому краю
    </div>
    <div>
      По левому краю
    </div>
  </div>
  
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  
  <div>
    <div>
      По правому краю
    </div>
    <div>
      По правому краю
    </div>
  </div>
  
  <div>
    <div>
      Around
    </div>
    <div>
      Around
    </div>
  </div>
  
  <div>
    <div>
      Between
    </div>
    <div>
      Between
    </div>
  </div>
</div>

Промежутки

Используйте класс . no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

.col-12 .col-sm-6 .col-md-8 no-gutters

.col-6 .col-md-4

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Сортировка колонок

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

push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

  • .flex-first – отображается первым
  • .flex-last – отображается последним
  • .flex-unordered – отображается между первым и последним

Первый, но не первый и не последний

Второй, но последний

Третий, но первый

<div>
  <div>
    <div>
      Первый, но не первый и не последний
    </div>
    <div>
      Второй, но последний
    </div>
    <div>
      Третий, но первый
    </div>
  </div>
</div>

Смещение колонок

Для сдвига колонок вправо используйте . offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
   <div>.col-md-6 .offset-md-3</div>
  </div>
</div>
Реклама

Метка: div | WordPress.org Русский

Перейти к содержимому

Перейти к содержимому

    • Почему на прилепляется Div

      Начато: zgd41

    • 1
    • 1
    • 10 месяцев, 3 недели назад

      zgd41

    • Добавление блоков div в редактор Gutenberg

      Начато: prototip76

    • 2
    • 1
    • 2 года, 5 месяцев назад

      Yuri

    • Обернуть h3 в статье в div

      Начато: Asome

    • 3
    • 5
    • 2 года, 10 месяцев назад

      Otshelnik-Fm

    • Как сделать, чтобы блоки перемещались на маленьком экране?

      Начато: aline18

    • 3
    • 6
    • 4 года, 9 месяцев назад

      anonymized-14765447

    • Пофиксить размер слайдера

      Начато: kachi88

    • 2
    • 4
    • 5 лет, 1 месяц назад

      kachi88

    • Прижать div элемент к правому краю

      Начато: kachi88

    • 2
    • 2
    • 5 лет, 1 месяц назад

      kachi88

    • Возможно ли создавать в визуальном редакторе вложенные блоки одного класса? 1 2

      Начато: madwastefield

    • 4
    • 26
    • 5 лет, 4 месяца назад

      madwastefield

    • Изменить код HTML (добавить блок)

      Начато: yakut87

    • 2
    • 1
    • 6 лет, 11 месяцев назад

      1596754as98

    • Как правильно разместить элементы в div?

      Начато: Zakonoposlushniy

    • 1
    • 0
    • 6 лет, 11 месяцев назад

      Zakonoposlushniy

    • Заменить checkbox на select

      Начато: surprise777

    • 2
    • 1
    • 7 лет назад

      makprg

    • Выделение текста через div

      Начато: Dima

    • 2
    • 5
    • 7 лет назад

      Dima

    • woocommerce шаблон генерирует два помогите найти

      Начато: Kirill Kulakov

    • 1
    • 1
    • 7 лет, 10 месяцев назад

      Kirill Kulakov

    • как спрятать блок кроме подробной новости?

      Начато: amwebo

    • 3
    • 7
    • 8 лет назад

      amwebo

    • Фон блока, 404 ошибка

      Начато: alexangeras

    • 1
    • 0
    • 8 лет, 3 месяца назад

      alexangeras

    • Открытие блока в регистрации

      Начато: professorsda

    • 1
    • 0
    • 10 лет, 7 месяцев назад

      professorsda

    • div clear both между виджетами

      Начато: Peacemaster

    • 2
    • 2
    • 11 лет, 7 месяцев назад

      Peacemaster

    • Почему opacity наследуется и как это утранить

      Начато: sashamori

    • 3
    • 3
    • 11 лет, 11 месяцев назад

      Jeny Elkind

    • Расположение блока менюшки

      Начато: bublick

    • 3
    • 4
    • 11 лет, 11 месяцев назад

      bublick

    • Добавление элемента(div) вокруг текста поста.

      Начато: 2_k

    • 3
    • 12
    • 12 лет, 7 месяцев назад

      2_k

css — Разместите контейнер div с правой стороны

Я хочу разработать какую-нибудь служебную панель. Я могу расположить каждый элемент на этой панели рядом, используя float:left;

Но я хочу, чтобы второй элемент располагался в самом правом углу панели. Это сложно для меня, потому что ширина полосы не статична.

Взгляните на мою демонстрацию: http://jsfiddle.net/x5vyC/2/

Это должно выглядеть так:

Есть идеи, как добиться этого с помощью CSS?

0

Это то, что вы хотели? — http://jsfiddle.net/jomanlk/x5vyC/3/

Теперь плавает с обеих сторон

 #wrapper{
    фон:красный;
    переполнение:авто;
}
# с1 {
   плыть налево;
   фон:синий;
}
# с2 {
    фон:зеленый;
    поплавок: справа;
}​
<дел>
    
кон1

    
con2
​

2

Просто хочу обновить это для начинающих, теперь вам определенно следует использовать flexbox для этого, это более уместно и работает для отзывчивости, попробуйте это: http://jsfiddle. net/x5vyC/3957/

 #wrapper{
  дисплей: гибкий;
  выровнять содержание:пробел между;
  фон:красный;
}
# с1 {
   фон:синий;
}
# с2 {
    фон:зеленый;
}
<дел>
    
кон1

    
con2
​
  • Используйте float: right для… плавания второго столбца вправо..
  • Используйте overflow: hidden , чтобы очистить плавающие элементы, чтобы цвет фона, который я только что добавил, был виден.

Живая демонстрация 

 #wrapper{
    фон:#000;
    переполнение: скрыто
}
# с1 {
   плыть налево;
   фон:красный;
}
# с2 {
    фон:зеленый;
    поплавок: справа
}

, если вы не хотите использовать float

 


 Здравствуйте 



  <дел>

 Здравствуйте

У меня есть еще одно решение, кроме float: верно.

 выравнивание текста: по правому краю;
набивка: 10рем 3рем 2рем 3рем;
ширина: 58%;
выравнивание элементов: конец;
поле: 0px 0px 0px авто;

иногда float не работает, когда мы используем элемент ширины для определенной ширины, в то время мы можем использовать приведенный выше код

Это работает для меня.

 <дел>
    <дел>
      Это будет слева