smsc banner 468x60smsc banner 728x90smsc banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Как выровнять содержимое div по низу с помощью CSS

Вы можете использовать метод абсолютного позиционирования, чтобы выровнять содержимое <div> по нижнему краю.

В следующем примере элемент <div> с классом .content будет размещен внизу элемента div.box. Давайте попробуем понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Align Content of a Div to the Bottom</title>
<style>
    .box{
        color: #fff;
        background: #000;
        position: relative;
        min-height: 200px;
        padding-bottom: 30px; /* чтобы избежать наложения контента */
    }
    .box .content{    
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>
    <div class="box">
        <h1>Page Title</h1>
        <div class="content">Этот фрагмент текста будет все время оставаться внизу родительского div.</div>
    </div>
</body>
</html>
beget banner 480x320beget banner 728x90beget banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как добавить CSS стили к элементу с дата атрибутом в HTML

Чтобы добавить CSS к <div> с определённым data атрибутом, можно использовать селектор атрибутов в вашем CSS-файле. Вот как это сделать: Объяснение Пример Вот пример, который добавляет стили к вашему <div>: В этом примере <div> с атрибутом data-container=»outer» будет иметь светло-серый фон, рамку и отступы. Текст внутри <div> будет выровнен по центру.
Подробнее

Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS

Вы можете использовать CSS-свойство transition, чтобы плавно анимировать background-color элемента при наведении курсора мыши. Давайте посмотрим пример, чтобы понять, как это работает:
Подробнее