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

Question

这是我所指的图像：

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

Answer 1

在这种情况下，使用 flexbox.

即可满足您的需求

大头针大致保持在基线以上相同的高度，大约为 1px。

工作原理：当绿色元素增长时说 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>

Answer 2

您可以为此使用 table 属性。 Table 个单元格填充其父级宽度。如果一个单元格较短，则另一个单元格将扩展以填充其父单元格。这里的技巧是将 "table" 旋转 90º，然后就完成了。要更改固定项目的“高度”，您实际上会更改其宽度。锚元素将相应地调整大小。

不过要注意这一点：http://caniuse.com/#search=transform

.baseline{
  height: 100px;
  width: 100px;
  border: 3px solid black;
  display: table;
  transform: rotate(90deg);
  }

.pinned,.anchored{
  display: table-cell;
  }

.pinned{
  width: 30px;
  border: 3px solid green;
  }

.anchored{
  border: 3px solid orange;
  }

<div class="baseline">
  <div class="pinned">
    </div>
  <div class="anchored">
    </div>
</div>

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

Using CSS, how do you anchor an element to a baseline and size it based on another "pinned" element?

html

css

anchor

sizing

centering