Question

我想创建div，其中应该有这样的文字：

enter image description here

但是我无法正确定位文本。由于我使用transform: rotate(-90deg);，我对left，right，top和bottom感到困惑。

我的主要问题是关于为什么文本有时会中断，为什么有right: -32px;之类的内容，并且有一种很好的方法可以保持所有响应（各种文本长度，不同长度的re d块）。我添加了一个屏幕截图，以显示我想在哪个上下文中使用它：

enter image description here

HTML：

<div class="chart-block" id="block2" style="height: 90%; left: 120px;">
   <div>
      <span>The Cup of tea</span>
   </div>
</div>

CSS：

.chart-block {
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 40px;
    background-color: #ef0707;
}

.chart-block > div {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
}

Answer 1

I would do it something like this.我旋转整个块，而不仅仅是文本。这样你就可以以更正常的方式定位文本。

HTML：

<div class="chart-block" id="block2">
    <span>The Cup of tea</span>
</div>

CSS：

.chart-block {
    display: block;
    position: absolute;
    width: 400px;
    height: 40px;
    left: 40px;
    background-color: #ef0707;
    -webkit-transform: rotate(-90deg);
    -transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.chart-block span {
    display: block;
    color: white;
    font-size: 16px;
    padding: 5px;
}

Answer 2

由于你已经在文本的父级上有一个位置相对，你可以在实际文本上使用position绝对位置将它放在父级的底部，我真的不喜欢使用绝对位置，但这适合你的代码。

HTML：

<div class="chart-block" id="block2" style="height: 90%; left: 120px;">
    <div>
        <span>The Cup of tea</span>
    </div>
</div>

CSS：

.chart-block {
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 40px;
    overflow: hidden;
    background-color: #ef0707;
    transition: height ease 1s;
}

.chart-block > div {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
    position:absolute;
    bottom:15px;
    left:0;
}

See this fiddle

然而，Watson建议的内容也不错，但我考虑的是浏览器兼容性，以便根据需要保持条形图的宽度。

Answer 3

也许这就是你想要的

CSS（只有跨度，其余部分保持不变）

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
    width: 200px;
    left: 50%;
    bottom: 0px;
    position: absolute;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

updated demo

请注意，唯一的固定值是跨度的宽度。其余的是0值（保持不变）和百分比值（应该使它完全响应）。关于宽度，唯一必要的是它足够高，文本不被剪裁，所以应该很容易找到一个好的价值。

Answer 4

您是否希望它只在页面上显示 - 或者也冻结到位？

我们在页脚中显示较小屏幕的“反馈”链接，在右上方显示较大的屏幕：http://jsfiddle.net/wHL7g/

HTML：

<div class="feedbackRequest">
    <a href="/feedback" data-role="none">Feedback</a>
</div>

CSS：

.feedbackRequest {
  color: #05afba;
  margin: 0 auto;
}
.feedbackRequest a {
  background-color: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #05afba;
  color: #05afba;
  display: block;
  margin: 10px auto 0 auto;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  width: 70px;
}
.feedbackRequest a:hover {
  border: solid 1px #025257;
  color: #025257;
  text-decoration: none;
}
@media only screen and (min-width: 360px) {
  .feedbackRequest {
    position: fixed;
    top: 100px;
    right: -32px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 1000;
  }
  .feedbackRequest a {
    margin: 0;
    width: auto;
  }
}

将旋转的跨度定位到右侧

4 个答案: