正确定位旋转文本（带字母间距/html5/CSS）

我已经阅读并尝试了有关Stackoverflow这个主题的大部分答案，但没有一个对我有效（旋转是，正确定位否）。我的问题是：

• 将文本旋转90度
• 如下图所示正确定位-90度文本（最终结果）
• 代码应适用于响应性设计（%）

我在JSFIDLE中添加了完整的代码（包括内容上方的标题）。我添加了灰色标题，以澄清在图像/标题/文本开始之前存在上述内容：

如何（1）旋转文本，更重要的是（2）如何定位旋转后的文本，使其与最终结果相似：

HTML代码（参见JSFiddle）：

<header>

<div class="header-wrap">

<div class="header-left"></div>
<div class="header-right"></div>

</div>

</header>

<section>

<div class="about-wrap">

<div class="about-img"><img src="http://www.sidneyblake.com/wp-content/uploads/2015/06/Foggy-black-white-trees-alberta-landscape.jpg" ></div>
<div class="about-cnt">

<div class="about-ttl"><h1>ABOUT</h1></div>
<div class="about-txt"><p>Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis.

Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis.

In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.</p></div>

</div> <!-- End of about-cnt -->


</div> <!-- End of about-wrap -->

</section>

关于
tibique scaevola mea ut，soluta forensibus suscipiantur et usu，他在munere fabellas。我们必须保证质量，保证质量。我不同意你的意见。在eos possit elaboraret，海洋生活酒店。
身份证上的领事。Suas Quote mei ut，ne habeo自由主义者。不存在任何争议，请参见第二部分。特写他的面部恶疾。
在audiam Tracatos per。欧盟正在重新部署。可能会发生意外。奥古斯特·伊格诺塔（Augue ignota）是前圣所诺米纳维（nominavi vix）的代表，但不属于知识界。不，这是一个令人憎恶的原则。蒙迪·平庸的抄写员，格拉科·提奥弗拉斯托斯是他的

提前感谢。

使用css旋转

.about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px; 
}

用于旋转文本

从顶部应用适当的边距来定位它

/*标题样式*/
.收割台包装{
宽度：100%；
高度：50px；
背景色：#ccc；
}
.左标题{
宽度：50%；
浮动：左；
}
.右标题{
宽度：50%；
浮动：对；
}
img{
最大宽度：100%；
}
/*段落样式*/
h1{
字号：1em；
字体大小：粗体；
字体系列：“蒙特塞拉特”，无衬线；
字母间距：15px；
填充：0；
保证金：0；
}
.关于ttl h1{
边缘顶部：80px；
变换：旋转（270度）；
-ms变换：旋转（270度）；/*用于IE9*/
-webkit变换：旋转（270度）；/*铬合金、Opera和Safari*/
}
p{
字体系列：“Maven Pro”，无衬线；
填充：0；
保证金：0；
}
/*剖面样式*/
.关于包裹{
宽度：100%；
明确：两者皆有；
}
.关于img{
宽度：50%；
浮动：左；
}
.关于cnt{
宽度：50%；
浮动：对；
}
.关于ttl{
宽度：20%；
浮动：左；
}
.about.txt{
宽度：60%；
保证金权利：20%；
浮动：对；
}

关于
tibique scaevola mea ut，soluta forensibus suscipiantur et usu，他在munere fabellas。我们必须保证质量，保证质量。我不同意你的意见。在eos possit elaboraret，海洋生活酒店。
身份证上的领事。Suas Quote mei ut，ne habeo自由主义者。不存在任何争议，请参见第二部分。特写他的面部恶疾。
在audiam Tracatos per。欧盟正在重新部署。可能会发生意外。奥古斯特·伊格诺塔（Augue ignota）是前圣所诺米纳维（nominavi vix）的代表，但不属于知识界。不，这是一个令人憎恶的原则。蒙迪·平庸的抄写员，格拉科·提奥弗拉斯托斯是他的

对CSS所做的这些更改应该会让它非常接近您的目标

。关于ttl{
宽度：20%；
浮动：左；
位置：相对位置；
变换：旋转（-90度）translateX（-50%）；
}
.关于ttl h1{
显示：内联块；
转化：translateY（-50%）；
位置：绝对位置；
右：-15px；/*应匹配h1的字母间距长度*/
}

---

总之，旋转并平移

.about ttl

块，使其边缘与上面的

.header wrap

元素齐平。然后定位其子

元素，使其边缘也齐平（考虑

元素的

15px

字母间距）。此样式应适用于任意长度的文本（除了“关于”）。如果是，并且文本中有空格，请确保添加

空白：nowrap至
。关于ttl
非常感谢您的帮助，我看到的挑战是如何使旋转后的文本与旁边的文本保持一致。因此，无论屏幕缩小多少，About的T始终与文本的第一行在一条水平线上。当前（在缩放屏幕时）About文本移离了位置。非常感谢，我认为这个方法最接近我所寻找的，并且效果很好。当我缩小屏幕时，屏幕上的“大约”仍保留在同一位置，并与旁边的文本保持一致。非常感谢，它与上面范德什发布的内容类似。我发现它也存在同样的问题，当缩小屏幕时，ABOUT正在跑开（而不是在固定位置）。我更喜欢的是：About文本应该与它旁边的文本固定在一起（因此T用第一行文本勾勒出轮廓）。谢谢，这同样有效，与上面的答案类似，而且它涵盖了多个浏览器。我在iPhone上使用Safari时遇到了一些问题。我添加了右边的边距：-15px以抵消字母间距。它很好地将标题设置为与文本内联。