Что я хочу сделать:
что блочный элемент регулирует свою высоту относительно элемента в абсолютном положении.
проблематичен:
Если цена слишком длинная, цена покидает блок.
Условия:
- Для перехода по ссылке элемент блока должен быть кликабельным.
- Цена не должна быть в ссылке для ссылки.
Что я пытался сделать:
Сделайте элемент цены кликабельным в javascript, чтобы перейти по ссылке и удалить абсолютную позицию, это решение не было выбрано, потому что вы не можете нажать «CTRL + CLICK», чтобы открыть новую вкладку.
Дело, которое хорошо работает:
* {
box-sizing: border-box;
}
.block {
background: #3CAEA3;
display: inline-block;
position: relative;
}
.link {
display: inline-block;
padding: 20px 20px 40px 20px;
text-align: center;
text-decoration: none;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.price {
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
pointer-events: none;
}
<div class="block">
<a class="link" href="https://google.com">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</a>
<div class="price">
The price is: 100€
</div>
</div>
Случай, который не работает:
* {
box-sizing: border-box;
}
.block {
background: #3CAEA3;
display: inline-block;
position: relative;
}
.link {
display: inline-block;
padding: 20px 20px 40px 20px;
text-align: center;
text-decoration: none;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.price {
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
pointer-events: none;
}
<div class="block">
<a class="link" href="https://google.com">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</a>
<div class="price">
The price is tooooo long: 100€
</div>
</div>
У вас есть какие-нибудь решения моей проблемы?
Спасибо.