[英]Align rotated div with another div
我有一个主要的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>
您不需要JS来对齐旋转的div。 您可以在CSS中定义变换原点 ,然后很容易对齐。
-moz-
和-o-
供应商前缀,请参阅caniuse 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%;
}
您也可以不依赖于将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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.