将旋转的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中定义transform origin，然后就可以轻松对齐。

• 附注：您可以删除-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%;
}

Answer 2

你也可以不依赖于将你的div移动到位的硬编码大小，但你需要一个围绕.verticaldiv的包装器

演示： http://jsfiddle.net/MCr6f/

演示2： http://jsfiddle.net/9LtKw/（表明不同尺寸并不重要）

HTML：

<div class="one">
    Hello
    <div class="pivot">
        <div class="two">
            Pretty!
        </div>
    </div>
</div>

的CSS：

.one {
    background: red;
    position: relative;
    float: left;

     /*strange and difficult sizes*/
    font-size: 3.237827em;
    padding: 10px;
}

.pivot {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 0px;
    height: 0px;
}

.two {
    background: blue;
    color: white;
    position: absolute;
    left: 0;
    bottom: 0;

    /*strange and difficult sizes*/
    font-size: 12px;
    padding: 0.3em;
}