Всем привет! Я backend-щик, а поставили задачу по верстке. Имеется два блока A и Б, у которых может быть разная высота. Вопрос, как их выровнять по нижнему краю как указано на рисунке.
Используя Flexbox:
.db {
display: flex;
align-items: flex-end;
}
.d1 {
background-color: blue;
}
.d2 {
background-color: red;
}
<div class="db">
<div class="d1">
текст текст
</div>
<div class="d2">
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>
</div>
Задайте этим блокам vertical-align: bottom;
.a,.b{
width: 100px;
display: inline-block;
background-color: silver;
vertical-align: bottom;
}
.a{
height: 200px;
}
.b{
height: 160px;
}
<div class="a"></div>
<div class="b"></div>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей