html - 如何在绝对位置上将一个元素调整到另一个元素？

Question

我想做什么:

block 元素相对于绝对位置的元素调整其高度。

有问题的:

如果价格太长，价格就会离开区 block 。

条件:

• block 元素必须可点击才能转到链接。
• 价格不得出现在链接中以供引用。

我一直在尝试做的事情:

在 javascript 中使价格元素可点击以转到链接并删除绝对位置，未选择此解决方案，因为您无法执行“CTRL + 单击”以在新选项卡中打开。

效果好的案例:

* {
  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>

你有什么办法解决我的问题吗？

谢谢。

Answer 1

* {
  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>