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

Question

我正在开发一个网站＆＃34; example.com＆＃34;是它的测试标题，我想知道如何制作＆＃34; .com＆＃34;书面横向自下而上（显然字体大小小于＃34;示例＆＃34;）。

Answer 1

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

＆＃13;

＆＃13;

.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
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;