Question

我正在制作专门用于练习的克隆，但我被卡在侧边栏中。它在侧边栏上显示水平图像而不是垂直图像。请告诉我解决方案，我可以继续。

HTML CODE

<aside class="side-border" id="side-border-right">
        <div class="right-side"><img src="images/j1.png"</div>
   </aside>

CSS代码

.side-border {
    background: none repeat scroll 0 0 #ccc;
    bottom: 0;
    color: #9ca0a6;
    font-size: 11px;
    letter-spacing: 0px;
    font-weight: 400;
    padding: 0 24px;
    position: fixed;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    white-space: nowrap;
    width: 171px;
    z-index: 40;
}

.side-border>div {
    display: inline-block;
    height: 12px;
    left: 24px;
    line-height: 12px;
    margin-top: 150px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    width: 300px;
}

.side-border>div.right-side {
    left: auto;
    right: 34px;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform-origin: 100% 100% 0;
    -moz-transform-origin: 100% 100% 0;
    -webkit-transform-origin: 100% 100% 0;
    -o-transform-origin: 100% 100% 0;
}

Answer 1

只需在.right-side元素中使用此css即可。您不需要在父元素中使用样式。虽然您也可以在图像中使用这些样式。看这里......

＆＃13;

.right-side {position: absolute; right: 0px; top: 50%; transform-origin: 100% 0% 0; transform: rotate(90deg) translateX(50%);}

＆＃13;

<div class="right-side"><img src="http://www.cutetravelmate.com/images/priority_shinet1.gif"</div>

＆＃13;

如何在侧栏上保持图像垂直

1 个答案: