@siteohio

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

Приветствую.
Подскажите пожалуйста как кнопку прижать к низу блока?
Есть три блока в которых идет текст разной высоты и внизу кнопка, как сделать так чтобы кнопки были на одном уровне?
Прикрепил скриншот.
63544a319625c036269709.jpeg
  • Вопрос задан
  • 2503 просмотра
Пригласить эксперта
Ответы на вопрос 2
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;
Ответ написан
Комментировать
@Genri_Rus
Можно вот так: ссылка
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы