Html 如何在绝对位置将一个元件调整到另一个元件？

我想做什么：

块元素相对于处于绝对位置的元素调整其高度

有问题：

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

条件：

• 块元素必须可单击才能转到链接
• 价格不得位于链接中以供参考

我一直想做的事情：

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

有效的案例是：

*{
框大小：边框框；
}
.街区{
背景#3CAEA3；
显示：内联块；
位置：相对位置；
}
.链接{
显示：内联块；
填料：20px 20px 40px 20px；
文本对齐：居中；
文字装饰：无；
}
.头衔{
字体大小：20px；
}
.副标题{
字体大小：16px；
}
.价格{
高度：20px；
位置：绝对位置；
底部：0；
左：0；
右：0；
文本对齐：居中；
指针事件：无；
}

价格是：100欧元

*{
框大小：边框框；
}
.街区{
背景#3CAEA3；
显示：内联块；
位置：相对位置；
}
.链接{
边缘底部：50px；
显示：内联块；
填充：20px 20px 40px 20px；
文本对齐：居中；
文字装饰：无；
}
.头衔{
字体大小：20px；
}
.副标题{
字体大小：16px；
}
.价格{
高度：自动；
位置：绝对位置；
底部：0；
左：0；
右：0；
文本对齐：居中；
指针事件：无；
}

价格是100欧元

我认为使用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>

*{
框大小：边框框；
}
.街区{
背景#3CAEA3；
显示：内联flex；
证明内容：之间的空间；
弯曲方向：立柱；
}
.链接{
显示：内联块；
填充：20px；
文本对齐：居中；
文字装饰：无；
}
.头衔{
字体大小：20px；
}
.副标题{
字体大小：16px；
}
.价格{
填充：20px；
文本对齐：居中；
/*指针事件：无*/
}

我找到了解决方案

.block{
背景#3CAEA3；
位置：相对位置；
文本对齐：居中；
最大宽度：200px；
利润率：10px；
}
链接
fakeLink先生{
填充：20px；
}
.链接{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
光标：指针；
文字装饰：无；
}
fakeLink先生{
不透明度：0；
}
.价格{
填充：0 10px 10px 10px；
文本对齐：居中；
指针事件：无；
}
.头衔{
字体大小：20px；
}
.副标题{
字体大小：16px；
}

茶几
木制的
价格太长了：100欧元
茶几
木制的
价格是100欧元

您尝试使用绝对值有什么原因吗？flexbox是一个选项吗？如果您不关心旧浏览器，请使用flexbox。父div将自动调整大小只要删除固定高度（

height:20px

），我真的不知道该怎么做。价格元素必须是可点击的，如果我删除绝对位置，它将不再是这种情况。如果我删除20像素的高度，如果价格在3行上，那就不好了。将“价格太长：100欧元”替换为“价格太长：100欧元”，它不起作用：（在您的示例中，价格是不可点击的。：/请检查它现在是可点击的链接，但它不是块的同一链接。价格链接现在是块的同一链接整个块必须是可点击的，并导致第一个链接（谷歌），不是这样，第二个链接不会导致任何地方。）