旋转和对齐 div

Question

我有一系列水平对齐的 div，因此它们的顶部边缘接触到一条水平线。然后对于每个水平 divs 我想要另一个 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>

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;
  }
}

旋转和对齐 div

Rotating and aligning divs

html

css

rotation

alignment