Всем привет столкнулся с проблемой, есть верстка, 3 дива, на 1 из них overflow: hidden, из-за чего едет базовая линия контейнера. как выровнять блоки в одну линию? Пример верстки добавил сюда: https://jsfiddle.net/ap11fxod/1/
.a {
height: 29px;
width: 500px;
background: #f231ad;
line-height: 29px;
padding: 0 10px;
}
.a > div {
display: inline-block;
}
.b {
overflow: hidden;
max-width: 370px;
white-space: nowrap;
font-size: 18px;
color: #FFF;
}
.c {
font-size: 14px;
padding: 0 5px;
}
.d {
font-size: 12px;
padding: 0 5px;
}
<div class='a'>
<div class='b'>
БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ
</div>
<div class='c'>
Текст 1
</div>
<div class='d'>
Текст 2
</div>
</div>
Все просто.
.a {
display: flex;
}
.a {
height: 29px;
width: 500px;
background: #f231ad;
line-height: 29px;
padding: 0 10px;
display: flex;
}
.a > div {
display: inline-block;
}
.b {
overflow: hidden;
max-width: 370px;
white-space: nowrap;
font-size: 18px;
color: #FFF;
}
.c {
font-size: 14px;
padding: 0 5px;
}
.d {
font-size: 12px;
padding: 0 5px;
}
<div class='a'>
<div class='b'>
БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ
</div>
<div class='c'>
Текст 1
</div>
<div class='d'>
Текст 2
</div>
</div>
Как вариант — добавить vertical-align
к внутренним блокам:
.a > div {
display: inline-block;
vertical-align: bottom;
}
bottom
можно заменить на что-то другое по желанию. Блоки со свойством inline-block
с помощью vertical-align
выравниваются в строке друг относительно друга по высоте своими границами.
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Сайт одностраничный, при нажатии ссылки переходит на определенную позицию на страницеИ никак не получается сделать ссылку меню активной...
Как я понял атрибут crossorigin - для обработки запросов с других источниковПеречитал интернет, так толком и не понял смысл атрибута