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

Question

我有一个主要的div(小提琴中的红色div),侧面有一个较小的垂直标签(小提琴中的蓝色div).

RED div是标准但蓝色div旋转90度(因为我需要在其中有垂直文本).这是问题开始的地方.

红色div垂直定位在50%,因此位于页面中间并通过滚动等锁定.

我想对齐蓝色div,使蓝色div的上边缘与红色div的上边缘位于同一Y位置.

我宁愿不使用jQuery,但如果需要可以做.

期望的输出:

小提琴在这里: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.您可以在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%;
}