我有一系列水平对齐的 div,以便它们的顶部边缘接触一条水平线。然后,对于每个水平 div,我想要紧靠其上方的另一个 div,旋转 90 度,以便其左边缘与其下方框的中心对齐,但连接到同一水平线。
这甚至可以做到吗,谁能告诉我怎么做或给我指明正确的方向?!
最佳答案
结合使用 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>
关于html - 旋转和对齐 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48335560/