水平和垂直将文本沿不同方向对齐

Question

我正在开发一个网站，"example.com"是它的测试标题，我想知道如何使".com"自下而上横向书写(显然是字体大小比"示例"小(。

Answer 1

可能有一种更简单的方法，你的问题在最后一个方向部分也有些模糊。 所以这是一个快速的答案，我放了一些边框来显示东西在哪里。

.example-thing {
  border: solid lime 1px;
}
.firstpart {
  margin-top: 1em;
  font-size:2em;
  vertical-align: bottom;
  border: solid blue 1px;
  display: inline-block;
}
  .com {
    margin-bottom: .5em;
    margin-left: -.5em;
    border: solid orange 1px;
    vertical-align: bottom;
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
  }

<div class="example-thing">
  <span class="firstpart">example</span>
  <span class="com">.com</span>
</div>