旋转和对齐div

Question

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

甚至可以这样做，任何人都可以告诉我如何或指出我正确的方向？！

Answer 1

柔性，相对定位和绝对定位的组合可以解决这个问题：

* { 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>

Answer 2

只需使用flexbox，就可以在没有绝对定位的情况下完成。这是一个例子：https://codepen.io/palash/pen/OzrpKJ

 <div class='boxes'>
  <div class='vertical'>
    <div class="box">fruits</div>
    <div class="box">carrot</div>
  </div>
  <div class="line"></div>
  <div class='horizontal'>
    <div class="box">
      apple
      banana
    </div>
    <div class="box">
      parsnip
      vegetables
    </div>
  </div>
</div>

CSS：

.boxes {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.line {
  height: 1px;
  width: 100%;
  background: black;
  margin: 0;
}

.box {
  border: 1px solid black;
}
.horizontal, .vertical {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.vertical {
  transform: rotate(-90deg);
  flex-direction: column;
  .box {
    border-left: 0;
    &:first-child {
      transform: translateY(-20px);
    }
  }
}

.horizontal {
   .box {
    border-top: 0;
  }
}