Как прижать блок к верху css
Перейти к содержимому

Как прижать блок к верху css

  • автор:

Как прижать div к верху

Составил такую структуру, и появилась проблема при большом количестве текста. Боковые блоки не прижимаются к верху экрана. Как возможно решить этот мой косяк?

.table < display: table; >.col1 < background-color: #ddf; float: left; width: 285px; >.col2 < background-color: green; width: 100%; display: table-cell; vertical-align: top; >.col3
 
 
Column1 
Column1 
Column1
 
This is an example of a div that contains a series of very long run on sentences. 
This is an example of a div that contains a series of very long run on sentences. 
This is an example of a div that contains a series of very long run on sentences. 
This is an example of a div that contains a series of very long run on sentences. 
This is an example of a div that contains a series of very long run on sentences. 
This is an example of a div that contains a series of very long run on sentences.
 
Column3

Как прижать div элемент к низу и верху?

Как прижать div элемент к низу и верху? чтобы при масштабировании див растягивался или сжимался.

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

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Avarskiy

Позиционируй его абсолютно. 

position: absolute; left: 0; bottom: 0;

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript
  • +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

  • 1 подписчик
  • 2 часа назад
  • 23 просмотра

html

  • HTML
  • +1 ещё

Как пофиксти проблему с амперсантом?

  • 1 подписчик
  • 11 часов назад
  • 54 просмотра

html

  • HTML
  • +2 ещё

Подобное поведение норма?

  • 1 подписчик
  • 13 часов назад
  • 106 просмотров

html

  • HTML
  • +3 ещё

Почему не работает переход на страницу?

  • 1 подписчик
  • 13 часов назад
  • 108 просмотров

html

  • HTML

Почему html2pdf выдает пустой лист?

  • 3 подписчика
  • вчера
  • 617 просмотров

css

  • CSS

Что за баг с ховером?

  • 1 подписчик
  • вчера
  • 98 просмотров

html

  • HTML
  • +1 ещё

Как блок вывести поверх других?

  • 1 подписчик
  • вчера
  • 56 просмотров

css

  • CSS
  • +1 ещё

Почему не подгружается картинка?

  • 1 подписчик
  • вчера
  • 85 просмотров

css

  • CSS
  • +2 ещё

Как Python и Selenium заставить найти текст?

  • 1 подписчик
  • 18 нояб.
  • 53 просмотра

html

  • HTML
  • +1 ещё

Как сделать данное задание?

  • 1 подписчик
  • 17 нояб.
  • 126 просмотров

от 150 000 ₽

от 35 000 до 40 000 ₽

20 нояб. 2023, в 10:22

1500 руб./в час

20 нояб. 2023, в 09:22

50000 руб./за проект

20 нояб. 2023, в 07:54

13000 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

  • Не могу зайти в mozilla thunderbird, после насройки почтового сервера. Хотя в логах клиент прошел аутентификацию. Что делать?
    • 2 подписчика
    • 0 ответов
    • 3 подписчика
    • 2 ответа
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 4 ответа
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 1 ответ

    Выравнивание элементов. justify-content¶

    Иногда мы можем сталкиваться с тем, что пространство flex-контейнеров по размеру отличается от пространства, необходимого для flex-элементов. Например:

    • flex-элементы не используют все пространство flex-контейнера
    • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

    Для управления этими ситуациями мы можем применять свойство justify-content . Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

    • flex-start : значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.
    • flex-end : последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее
    • center : элементы выравниваются по центру
    • space-between : если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start . В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами
    • space-around : если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center . В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

    Выравнивание для расположения элементов в виде строки:

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
     html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; > .flex-end  justify-content: flex-end; > .center  justify-content: center; > .space-between  justify-content: space-between; > .space-around  justify-content: space-around; > .flex-item  text-align: center; font-size: 1em; padding: 1.5em; color: white; > .color1  background-color: #675ba7; > .color2  background-color: #9bc850; > .color3  background-color: #a62e5c; > .color4  background-color: #2a9fbc; > .color5  background-color: #f15b2a; > style> head> body> h3>Flex-endh3> div class="flex-container flex-end"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Centerh3> div class="flex-container center"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Space-betweenh3> div class="flex-container space-between"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> h3>Space-aroundh3> div class="flex-container space-around"> div class="flex-item color1">Flex Item 1div> div class="flex-item color2">Flex Item 2div> div class="flex-item color3">Flex Item 3div> div class="flex-item color4">Flex Item 4div> div> body> html>

    Выравнивание элементов. justify-content

    Выравнивание при расположении в виде столбцов:

    Выравнивание элементов. justify-content

    См. также¶

    Как выровнять элемент по вертикали внутри блочного элемента

    Постановка задачи: необходимо задать вертикальное выравнивание для inline или inline-block элементов внутри блочного элемента.

    Подходы к решению задачи. Существуют различные способы, рассмотрим основные из них:

    1. Представить блочный элемент как ячейку таблицы ( display: table-cell ).
    2. IE6-7: метод expression.
    3. Приравнивание межстрочного интервала (свойство line-height ) и высоты блока (для однострочных элементов).
    4. Позиционирование при помощи внешнего блока ( position:absolute ).

    Ну а подведя итоги, рассмотрим еще один метод:

    5. Выравнивание с помощью свойства vertical-align.

    display: table-cell

    Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle :

       Вертикальное выравнивание. Способ display: table-cell .wrapper
    • Простота;
    • Выравнивает как одну, так и несколько строк.
    • Не работает в IE7 и ниже;
    • Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
    • Не всем нравится сам факт использования display: table-cell .

    IE6-7: метод expression

    Т.к. предыдущий способ не работает в IE6-7, то надо исправить эту неприятность.

    Expression — короткие куски JS кода, которые помещаются в файл стилей, выполняются один раз и работают только в IE. Expression невалидны. Добавляем к предыдущему примеру в файлы стилей для IE6 и 7 такой кусок кода:

    .wrapper p < z-index: expression( runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2) < 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +'px' ); >

    Рассматривать достоинства и недостатки смысла тут нет, т.к. достоинств нет, кроме того, что этот способ дополняет первый в IE6-7, но т.к. эти браузеры уже устарели, на них можно закрыть глаза.

    line-height

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

       Вертикальное выравнивание. Способ line-height .wrapper
    • Простота;
    • Кроссбраузерность.
    • Подходит только для однострочных элементов;
    • Позволяет выравнивать только по центру.

    position и отрицательный margin вверх

    Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top , равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative :

       Вертикальное выравнивание. Способ line-height .wrapper < position: relative; height: 400px; >.wrapper p 
    Я выровнен по вертикали
    • Кроссбраузерность;
    • Выравнивать элементы можно как по центру, так и в любом другом положении.
    • Трудоемко при большом количестве элементов;
    • Сложно управлять;
    • Необходимо знать и фиксировать высоту элемента;
    • В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

    Итог по популярным методам

    Как видно, данные методы не являются универсальными – каждый из них имеет пусть и небольшие, но недостатки. Наиболее универсальным оказывается метод display: table-cell , но он мне никогда не нравился, к тому же мы очень долго не отказывались от поддержки IE6-7. Поэтому появилась необходимость поработать над чем-то более универсальным. Рассмотрим Выравнивание при помощи vertical-align .

    Выравнивание при помощи vertical-align

    Как известно, свойство vertical-align не работает для блочных элементов, поэтому применять это свойства для них бесполезно. Однако, данное свойство прекрасно работает для inline и inline-block элементов. Если мы попробуем применить данное свойство для элементов внутри блочного элемента, то мы получим следующую картину:

       Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5

    Как видно, элементы выравниваются относительно строки, а не всего блока, что нам не подходит. Попробуем тогда внутрь блока добавить элемент (т.к. для inline элемента высоту задать нельзя, то элемент должен быть inline-block ) с высотой равной высоте внешнего блока. Добавляем (на картинке ниже показан серой линией) и получаем:

       Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:top; font-size:14px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:36px; >.el5 < vertical-align:bottom; font-size:12px; >.spanvmiddle

    Зададим для всех элементов vertical-align:middle .

    Что ж, одну строку мы таким образом отцентрировали. А что, если надо несколько строк? И тут проблем нет. Надо лишь для текстовых элементов задать display:inline-block :

       Вертикальное выравнивание. Способ vertical-align .wrapper < width:600px; height:100px; padding:30px; /* Добавлено для наглядности */ margin:0 auto; background:#dfdfdf; font-family:Arial, Helvetica, sans-serif; >.wrapper span < display:inline-block; >.el1 < vertical-align:middle; font-size:28px; >.el2 < vertical-align:middle; font-size:11px; >.el3 < vertical-align:middle; font-size:18px; >.el4 < vertical-align:middle; font-size:32px; >.el5 < vertical-align:middle; font-size:11px; >.spanvmiddle  
     строками текста   с тремя 
    строками текста

    Если нам не важна совместимость со старыми версиями IE, то элемент мы можем удалить, а его стили заменить на:

    .wrapper:after

    Стоит отметить несколько моментов:

    • К элементам, которые выравниваются, нельзя применять свойство float .
    • Между соседними inline-block элементами всегда есть расстояние, поэтому если их надо прижать друг к другу, то для внешнего блока надо задать font-size:0px; а у самих элементов восстановить, задав нужное значение.
    • Для внутренних элементов таким образом можно задавать как одинаковые значения ( top , bottom или middle ), так и разные.
    • Простота;
    • Кроссбраузерность;
    • Выравнивать элементы можно как по центру, так и в любом другом положении;
    • Подходит как для одной строки, так и для нескольких. Также, т.к. элемент имеет display:inline-block , он может содержать текст, графику (фон, картинка) и любой другой элемент.
    • Приходится добавлять дополнительный элемент;
    • При использовании псевдоэлемента :after , теряется поддержка старыми версиями IE.
    Похожие публикации:
    1. Как перезагрузить телевизор xiaomi без пульта
    2. Как решать системы уравнений в maple
    3. Как снять ремешок с apple watch
    4. Чем опасен передув турбины на volvo

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *