html - 旋转和对齐 div

Question

我有一系列水平对齐的 div，以便它们的顶部边缘接触一条水平线。然后，对于每个水平 div，我想要紧靠其上方的另一个 div，旋转 90 度，以便其左边缘与其下方框的中心对齐，但连接到同一水平线。

这甚至可以做到吗，谁能告诉我怎么做或给我指明正确的方向？!

Answer 1

结合使用 flex、相对定位和绝对定位可以解决这个问题:

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  padding-top: 5em;
}
.line {
  height: 1px;
  border-top: 1px solid black;
  margin: 0;
}
.blocks {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.h {
  border: 1px solid black;
  position: relative;
}
.v {
  border: 1px solid black;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  left: 50%;
  margin-left: -.75em;
  height: 1.5em;
}
  

<div class="line"></div>
<div class="blocks">
  <div class="h">
    <div class="v">fruits</div>
    apple<br />
    banana
  </div>
  <div class="h">
    <div class="v">carrot</div>
    parsnip<br />
    vegetables
  </div>
</div>