我想保持一个旋转的固定侧边栏从左侧精确到79%但是当我添加white-space: nowrap;
时它会弄乱该位置。也许更容易让侧边栏与中间div保持一个px的距离?
https://jsfiddle.net/cs6bya2g/embedded/result/
#sidebar-miniright {
position: fixed;
top: 50%;
left:79%;
width:25%;
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.sidebar-right {
width:auto;
}
^这就是我想要的。但是,当我调整浏览器大小时,它变得像下面的图片。当我添加white-space: nowrap;
时,会导致left: 79%;
变得不稳定。
答案 0 :(得分:1)
您的侧边栏元素侧面,旋转,这意味着width: 25%
会使侧边栏'的高度为窗口宽度的25% 的
解决方案是删除width: 25%
规则。将transform
属性更新为:
-webkit-transform: rotate(-270deg) translateX(-50%);
-moz-transform: rotate(-270deg) translateX(-50%);
-ms-transform: rotate(-270deg) translateX(-50%);
-o-transform: rotate(-270deg) translateX(-50%);
transform: rotate(-270deg) translateX(-50%);
这会使侧边栏文本垂直居中。您可以使用translateX
值来获得所需的结果。