html - 将旋转的 div 与另一个 div 对齐

Question

我有一个主 div( fiddle 中的红色 div)，侧面有一个较小的垂直标签( fiddle 中的蓝色 div)。

红色 div 是标准的，但蓝色 div 旋转了 90 度(因为我需要在其中放置垂直文本)。这就是问题开始的地方。

红色的 div 垂直定位在 50%，因此它位于页面中间并通过滚动等方式锁定。

我想对齐蓝色 div，使蓝色 div 的上边缘与红色 div 的上边缘位于相同的 Y 位置。

我宁愿不使用 jQuery，但如果需要可以使用。

期望的输出:

fiddle 在这里:http://jsfiddle.net/kBKf6/

这是我使用的代码:

<div id="main" style="position: fixed; top: 50%;  margin-top: -250px; left:0;   height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>

Answer 1

您不需要 JS 来对齐旋转的 div。你可以定义一个 transform origin然后在 CSS 中，对齐变得很容易。

• 旁注:您可以删除 -moz- 和 -o- 供应商前缀，请参阅 caniuse

DEMO

HTML :

<div id="main">Main Content Div
    <div id="verticaldiv">Side Tab</div>
</div>

CSS:

#main {
    position: fixed;
    top: 50%;
    margin-top: -250px;
    left:0;
    height: 500px;
    width: 450px;
    background-color:red;
}

#verticaldiv {
    overflow:hidden;
    position: absolute;
    left:100%;
    bottom:100%;
    height:40px;
    width:200px;
    background-color:blue;
    text-align:center;
    color:white;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg);
    -ms-transform-origin:0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}