我想做什么:
相对于处于绝对位置的元素,块元素调整其高度。
问题:
如果价格太长,价格便会下跌。
条件:
我一直在尝试做的事情:
在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>
您对我的问题有什么解决办法吗?
谢谢。
答案 0 :(得分:0)
* {
box-sizing: border-box;
}
.block {
background: #3CAEA3;
display: inline-block;
position: relative;
}
.link {
margin-bottom: 50px;
display: inline-block;
padding: 20px 20px 40px 20px;
text-align: center;
text-decoration: none;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.price {
height: auto;
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 toooooooo toooooo tooooo tooooo long: 100€
</div>
</div>
答案 1 :(得分:0)
我找到了解决方法!
.block {
background: #3CAEA3;
position: relative;
text-align: center;
max-width: 200px;
margin: 10px;
}
.link,
.fakeLink {
padding: 20px;
}
.link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
text-decoration: none;
}
.fakeLink{
opacity: 0;
}
.price {
padding: 0 10px 10px 10px;
text-align: center;
pointer-events: none;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
<div class="block">
<div class="fakeLink">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</div>
<div class="price">
The price is tooooo tooo tooo tooo too long: 100€
</div>
<a class="link" href="https://www.google.com">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</a>
</div>
<div class="block">
<div class="fakeLink">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</div>
<div class="price">
The price is 100€
</div>
<a class="link" href="https://www.google.com">
<div class="title">Coffee table</div>
<div class="subtitle">Made of wood</div>
</a>
</div>
谢谢您的帮助。
答案 2 :(得分:-1)
我认为使用flex可以解决您的问题。
* {
box-sizing: border-box;
}
.block {
background: #3CAEA3;
display: inline-flex;
justify-content: space-between;
flex-direction: column;
}
.link {
display: inline-block;
padding: 20px;
text-align: center;
text-decoration: none;
}
.title {
font-size: 20px;
}
.subtitle {
font-size: 16px;
}
.price {
padding: 20px;
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>
<a href="https://www.apple.com/" class="link price">
The price is tooooo long: 100€
</a>
</div>