Выравнивание по низу css: Как прижать элемент к низу или верху родительского элемента — Site on!

Leave a Comment / Css / By alexxlab / 09.04.2023

Содержание

html — CSS прижать блок к низу родителя

Вопрос задан 7 лет 3 месяца назад

Изменён 7 лет 3 месяца назад

Просмотрен 4k раз

есть конструкция:

<div>
   <div>
      <div>
       вывод информации
      </div>
      <ul>
       часть навигации
      </ul>
   </div>
   <div>
      <div>
      еще информация
      </div>
      <ul>
      еще часть навигации
      </ul>
   </div>
</div>

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

как сделать так, чтоб блоки main_info и sub_info были одинаковыми по высоте(выравнивались по макс высоте), и элементы навигации были прибиты к низу родительских блоков?(были в одну линию)

предвижу вопросы «зачем такое размещение?» по условиям заказчика, в sub_info в зависимости от прав пользователя будут разные свистоперделки, от такой конструкции до картинки/формы/тупого текста.

html
css

Чтобы гарантированно прибить блоки к низу родителей, рекомендую использовать position:

#main_info, #sub_info {
  position: relative;
}
#main_info ul, #sub_info ul {
  position: absolute;
  left: 0;
  bottom: 0;
}

вот только списки при этом выпадут из потока, Вам придется под них создавать отступы внутри родителей (padding-bottom = высота ul).

На счет равенства по высоте в голову приходит только эмуляция таблицы: display table-row и table-cell (должно прокатить, см. в спецификации CSS).

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Стилевые параметры текста.

CSS

Параметр

Значение

Описание

letter-spacing

(интервал между буквами)

: normal (по умолчанию),

: число с указанием единиц измерения


<style>
  #p1 (letter-spacing:10pt)
  #p2 (letter-spacing:15pt)
</style>

<body>
  <p id=p1>Раз два три<p>
  <p id=p2>Четыре пять<p>
</body>

text-decoration

(Определяет сочетание текста с горизонтальной линией)

: none (по умолчанию)
нет линии,

: overline
линия над текстом

: underline
подчеркивание

: line-through
зачеркивание

нет линии

линия над текстом

текст подчеркнут

текст зачеркнут

это ссылка


<style>
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>

line-height

(высота текущей строки)

: none (по умолчанию)

: число
с указанием единиц измерения

Число без единиц измерения — это коэффициент, на который следует умножить размер текущего шрифта.

Если указаны проценты (%), то д.б. более 100%.
Значение по умолчанию зависит от браузера



<style>
#p1 (line-height: 20pt)
#p2 (line-height: 1.4)
#p3 (line-height: 150%)
</style>

text-align

(Опрелеляет выравнивание текста относительно содержащего контейнера)

: left — лево

: right — право

: center — центр

: justify — равномерно

text-indent

(отступ первой строки)

: 0 (по умолчанию)

: число

Используется в абзацах для красной строки.

В качестве значений принимаются любые единицы длины, например,
пиксели (px),
дюймы (in),
пункты (pt) и др.
При задании значения в процентах (%), отступ первой строки вычисляется в зависимости от ширины блока.

text-transform

(преобразует текст)

: none (по умолчанию)
Снимает все унаследованные установки

: capitalize
Делает прописной (заглавной) первую букву каждого слова в элементе

: uppercase
Делает все буквы в элементе прописными

: lowercase
Делает все буквы в элементе строчными


<style>                    
 p. tr1 {text-transform: capitalize;}
 p.tr2 {text-transform: uppercase;}
</style>

<p class=tr1>текст1 текст2</p>
<p class=tr2>текст1 текст2</p>

текст1 текст2

vertical-align

(расположение по вертикали)

: middle (по умолчанию)
Устанавливает вертикальную среднюю линию элемента на уровне базовой линии родительского элемента с добавлением половины ширины строки последнего.

: baseline
Устанавливает выравнивание базовой линии элемента по базовой линии родительского элемента.

: super
Элеменнт отображается в виде верхнего индекса.

: sub
Элеменнт отображается в виде нижнего индекса.

: text-top
Выравнивает элемент по верху текста, набранного шрифтом родительского элемента.

: text-bottom
Выравнивает элемент по низу текста, набранного шрифтом родительского элемента.

: top
Выравнивает верх элемента по верху самого высокого элемента текущей строки.

: bottom
Выравнивает низ элемента по низу самого низкого элемента текущей строки.

white-space

(устанавливает, как отображать пробелы между словами)

: normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.

: nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.

: pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

: pre-line
В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.

: pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

: inherit
Наследует значение родителя.

Перенос текста и пробелы при разных значениях
white-space
Значение	Перенос текста	Пробелы
normal	Переносится	Не учитываются
nowrap	Не переносится	Не учитываются
pre	Не переносится	Учитываются
pre-line	Переносится	Не учитываются
pre-wrap	Переносится	Учитываются

<spanfiol»>white-space:nowrap»>COVID-19</span>

Слово COVID-19 не разорвется.

text-shadow

(добавляет тень к тексту)

: none
Отменяет добавление тени.

: цвет
Цвет тени.
По умолчанию цвет тени совпадает с цветом текста.
Необязательный параметр.

: сдвиг по x
Смещение тени по горизонтали относительно текста.
Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
Обязательный параметр.

: сдвиг по y
Смещение тени по вертикали относительно текста.
Допустимо использовать отрицательное значение, которое поднимает тень выше текста.
Обязательный параметр.

: радиус
Задает радиус размытия тени.
Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0.

/* Параметры тени */
<style>
p.tany {text-shadow: 1px 1px 2px black, 0 0 0.8em #808000;
color: #ffffff; font-size: 20pt;}
</style>

<body>
<p class=teny>Текст с тенью<p>
</body>

Текст с тенью

html — Выровнять DIV по нижней или базовой линии

Я пытаюсь выровнять дочерний тег div по нижней или базовой линии родительского тега div.

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

HTML

 
<дел>

CSS

 #parentDiv
{
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона:#ccc;
  фон-повтор: повтор
}
#parentDiv .дочернийDiv
{
  высота: 100 пикселей;
  ширина: 30 пикселей;
  цвет фона:#999;
}

Примечание

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

HTML
CSS

Вам нужно добавить это:

 #parentDiv {
  положение: родственник;
}
#parentDiv .childDiv {
  положение: абсолютное;
  внизу: 0;
  слева: 0;
}

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

Семь лет спустя поиск вертикального выравнивания все еще поднимает этот вопрос, поэтому я опубликую еще одно решение, которое у нас есть сейчас: позиционирование flexbox. Просто установите display:flex; выравнивание содержимого: flex-end; flex-direction: столбец в родительском div (также продемонстрировано в этой скрипке):

 #parentDiv
{
  дисплей: гибкий;
  выравнивание содержимого: flex-end;
  flex-направление: столбец;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона:#ccc;
  фон-повтор: повтор
}

Используйте значения отображения таблицы и ячейки таблицы CSS:

HTML

 
<тело>
  <дел>
    <дел>
      мой нижний выровненный div 1
      мой выровненный по нижнему краю div 2
      мой нижний выровненный div 3

CSS

 HTML, тело {
    ширина: 100%;
    высота: 100%;
}
. valign {
    дисплей: таблица;
    ширина: 100%;
    высота: 100%;
}
.valign > раздел {
    отображение: таблица-ячейка;
    ширина: 100%;
    высота: 100%;
}
.valign.bottom > div {
    вертикальное выравнивание: снизу;
}

Я создал демо JSBin здесь: http://jsbin.com/INOnAkuF/2/edit

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

это работает (я тестировал только ie & ff):

 
<голова>
    <тип стиля="текст/CSS">
        # родитель {
            высота: 300 пикселей;
            ширина: 300 пикселей;
            цвет фона: #ccc;
            граница: 1px сплошной красный;
            положение: родственник;
        }
        #ребенок  {
            высота: 100 пикселей;
            ширина: 30 пикселей;
            цвет фона: #eee;
            граница: 1px сплошной зеленый;
            положение: абсолютное;
            внизу: 0;
            слева: 0;
        }
    

<тело>
    родительский
        ребенок
    
    снаружи

надеюсь поможет.

Ответ, опубликованный Y. Shoham (с использованием абсолютного позиционирования), кажется самым простым решением в большинстве случаев, когда контейнер имеет фиксированную высоту, но если родительский DIV должен содержать несколько DIV и автоматически регулировать его высоту на основе динамического содержимого , то могут возникнуть проблемы. Мне нужно было иметь два блока динамического контента; один выровнен по верхней части контейнера, а другой по нижней, и хотя я мог заставить контейнер подстраиваться под размер верхнего DIV, если бы DIV, выровненный по низу, был выше, он не изменил бы размер контейнера, но выходил бы за пределы . Описанный выше метод romiem с использованием табличного позиционирования, хотя и немного сложнее, но более надежен в этом отношении и позволяет выравнивать по низу и корректировать автоматическую высоту контейнера.

CSS

 #контейнер {
        дисплей: таблица;
        высота: авто;
}
#вершина {
    отображение: таблица-ячейка;
    ширина: 50%;
    высота: 100%;
}
#нижний {
    отображение: таблица-ячейка;
    ширина: 50%;
    вертикальное выравнивание: снизу;
    высота: 100%;
}

HTML

 
    Динамическое содержимое, выровненное по верхней части #container
    Динамическое содержимое, выровненное по нижней части #container

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

Возможно, вам придется установить дочерний элемент div на position: absolute .

Обновите дочерний стиль до

 #parentDiv .childDiv
{
  высота: 100 пикселей;
  ширина: 30 пикселей;
  цвет фона:#999;
  положение: абсолютное;
  верх: 207 пикселей;
}

Старый пост, но я решил поделиться ответом со всеми, кто ищет. И потому, что когда вы используете абсолютных , все может пойти не так. Я бы сделал

HTML

 
<дел>

Css

 parentDiv {
}
дочерний раздел {
    высота: 40 пикселей;
    верхняя граница:-20px;
}

И это просто поместит нижний div обратно в родительский div. безопасен и для большинства браузеров

У меня было что-то похожее, и я заставил его работать, эффективно добавив к дочернему элементу padding-top .

Я уверен, что некоторые из других ответов здесь помогут найти решение, но я не смог заставить их легко работать спустя много времени; Вместо этого я остановился на решении padding-top, которое элегантно в своей простоте, но кажется мне несколько хакерским (не говоря уже о том, что устанавливаемое им значение пикселя, вероятно, будет зависеть от высоты родителя).

Вы также можете использовать вертикальное выравнивание

 тд {
  высота: 150 пикселей;
  ширина: 150 пикселей;
  выравнивание текста: по центру;
}
б {
  граница: 1px сплошной черный;
}
.ребенок-2 {
  вертикальное выравнивание: снизу;
}
.ребенок-3 {
  вертикальное выравнивание: сверху;
}

 <граница таблицы=1>
  
    <тд>
      ребенок 1
    
    <тд>
     ребенок 2
    
    <тд>
      ребенок 3

<тело>

<стиль>
.родитель{
  цвет фона: серый;
  высота:100вх;
  дисплей: гибкий;
  flex-направление: столбец;
  выровнять содержание:пробел между;
}


<дел>
    <дел>
        Привет, мир! это первый дочерний элемент, выровненный в верхней части родительского div

<дел> Привет, мир! это первый дочерний элемент, выровненный в пространстве между первым и последним дочерним элементом