html - 使用 CSS，如何将元素锚定到基线并根据另一个 "pinned"元素调整其大小？

Question

这是我所指的图像:

如果你有一些固定高度 h 从 pin 所在的基线开始，并且绿色元素是动态调整大小的，你如何让橙色元素占据两者之间的空间？

Answer 1

在这种情况下，使用 flexbox 就可以满足您的需求。

大头针大致保持在基线上方 1 像素的相同高度。

它是如何工作的:当绿色元素增长时说 10px 引脚升高 5px。但是 flex 设置意味着 dummy 和 orange 框各减少 5px 从而使图钉保持在恒定高度。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  border-bottom: 1px solid black;
}
.dummy {
  flex: 1;
}
.top {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  position: relative;
}
.top div {
  position: absolute;
  height: 3px;
  width: 3px;
  background: #880015;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bottom {
  width: 50px;
  border: 1px solid orange;
  flex: 1;
}

<div class="wrapper">
  <div class="dummy"></div>
  <div class="top">
    <div></div>
  </div>
  <div class="bottom"></div>
</div>