Question

我尝试旋转固定div的内容并按预期旋转，但问题是它没有占据div的高度。

示例小提琴here。

HTML：

kube-lego

CSS：

<div class="outer-left">
  <h2 class="paginator">Page 1 0f 10</h2>
</div>

注意：我可以通过在div上应用width = auto来实现它，但我怎么能使用固定宽度实现它？

现在我可以实现添加

.outer-left {
    background: #EFB041;
    height: 100%;
    display: block;
    width: 4%;
    position: fixed;
    left: 18%;
}

.paginator {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
}

在paginator类中。但有没有办法更清洁如何完成这项工作？

Answer 1

jsfiddle

也许这个jsfiddle适合你。

HTML:
    <div class="outer-left">
      <h2 class="paginator">Page&nbsp;1&nbsp;of&nbsp;10</h2>
    </div>
>
CSS:

  .outer-left {
    position: relative;
    background: #EFB041;
    overflow: hidden;
    width: 5%;
    left: 18%;
    height: 200px;
    float: left;

}

.paginator {
  position: absolute;
  top: 30%;
  left: -2.0em;
  width: auto;
  margin: 0;
  padding:0;

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #fff;
}

旋转内容时占据div的高度

1 个答案: