Задать вопрос
@siteohio
html

Как прижать кнопку к низу блока?

Приветствую.
Подскажите пожалуйста как кнопку прижать к низу блока?
Есть три блока в которых идет текст разной высоты и внизу кнопка, как сделать так чтобы кнопки были на одном уровне?
Прикрепил скриншот.
63544a319625c036269709.jpeg
  • Вопрос задан
  • 1360 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 3
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="main-block">
<div>
    <h2>Название</h2>
<ol>
    <li>Текст</li>
    <li>Текст</li>
    <li>Текст</li>
</ol>
<button class="btn">Кнопка</button>
</div>
<div>
    <h2>Название</h2>
    <ol>
        <li>Текст</li>
        <li>Текст</li>
       
    </ol>
    <button class="btn">Кнопка</button>
</div>
<div>
    <h2>Название</h2>
    <ol>
        <li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
    </ol>
    <button class="btn">Кнопка</button>
</div>
  </div>
</body>
<style>
    *{
        margin:0;
        padding:0;
    
}
.btn{
   margin-top: auto;
}
    .main-block{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .main-block div{
        width: 300px;
        height: 350px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 3px;
        padding: 10px;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.268);
    }
</style>
</html>

margin-top: auto;
Ответ написан
Комментировать
Комментировать
@historydev
Острая аллергия на анимешников 
button {
margin-top: auto;
}
Ответ написан
Комментировать
Комментировать
@Genri_Rus
Можно вот так: ссылка
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по UIKit & SwiftUI
03 мая 2024, в 22:42
1500 руб./в час
Разработать приложение (C#, wpf, MS SQL Server)
03 мая 2024, в 22:22
10000 руб./за проект
Работа со SwiperJs
03 мая 2024, в 22:18
1000 руб./за проект
Ещё заказы