如何在绝对位置将一个元素调整为另一个元素？答案

【问题标题】：How to adjust one element to another in absolute position?如何在绝对位置将一个元素调整为另一个元素？
【发布时间】：2019-07-10 22:14:45
【问题描述】：

我想做的事：

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

有问题：

如果价格太长，价格离开区块。

条件：

块元素必须是可点击的才能转到链接。
价格不得在参考链接中。

我一直在尝试做的事情：

在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>

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

谢谢。

【问题讨论】：

您尝试使用绝对值有什么原因吗？ flexbox 是一种选择吗？
如果您不关心旧浏览器，请使用 flexbox。父 div 会自动调整大小
简单去掉固定高度(height:20px)
我真的不知道该怎么做。价格元素必须是可点击的，如果我删除绝对位置它将不再是这种情况。如果我删除20像素的高度，如果价格在3行就不好了。

标签： html css absolute

【解决方案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>

【讨论】：

将“价格太长：100 欧元”替换为“价格太长了：100 欧元”，它不起作用。 :'(

【解决方案2】：

我找到了解决办法！

.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>

感谢您的帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

在您的示例中，价格不可点击。 ://
请检查它现在是否可以点击
链接是可点击的，但不是同一个链接。
价格链接现在与块相同
整个区块必须是可点击的并指向第一个链接（google），但事实并非如此，第二个链接不会指向任何地方