正确位置旋转文本（以字母间距/ HTML5/CSS）

Question

我已阅读并尝试了最大约＃2这个话题给出的答案，但没有人可以为我工作（转动是的，它的位置不正确）。我的问题：

• 旋转文本-90度
• 位置-90度文本正确如下（最终结果）的图片。
• 代码应工作的响应式设计（％）

我加入了完整的代码中的jsfiddle（包括我的头的内容同上）。我添加了灰色标题，以澄清在图像/标题/文本开始前存在以上内容：Link to JSFiddle code

您如何（1）旋转文本，更重要的是（2）如何定位旋转文本类似于最终结果：

See End Result image

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> 

预先感谢。

Answer 1

使用的CSS旋转

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

https://jsfiddle.net/md4zpxwn/3/

Answer 2

1. 使用CSS3 transform property旋转文本。
2. 从顶部应用适当的边距来定位它。

/* Header styles */ 
 

 
.header-wrap { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #ccc; 
 
} 
 

 
.header-left { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.header-right { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
/* Paragraph styles */ 
 

 
h1 { 
 
\t font-size: 1em; 
 
\t font-weight: bold; 
 
\t font-family: 'Montserrat', sans-serif; \t 
 
\t letter-spacing: 15px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.about-ttl h1{ 
 
margin-top : 80px; 
 
transform: rotate(270deg); 
 
-ms-transform : rotate(270deg); /* For IE9 */ 
 
-webkit-transform : rotate(270deg); /*Chrome, Opera and Safari*/ 
 
} 
 

 
p { 
 
\t font-family: 'Maven Pro', sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
/* Section styles */ 
 

 
.about-wrap { 
 
\t width: 100%; 
 
\t clear: both; 
 
} 
 

 
.about-img { 
 
\t width: 50%; 
 
\t float: left; \t 
 
} 
 

 
.about-cnt { 
 
\t width: 50%; 
 
\t float: right; 
 
} 
 

 
.about-ttl { 
 
\t width: 20%; 
 
\t float: left; 
 
} 
 

 
.about-txt { 
 
\t width: 60%; 
 
\t margin-right: 20%; 
 
\t float: right; \t 
 
}

\t <header> 
 
\t 
 
    <div class="header-wrap"> 
 
    
 
    <div class="header-left"></div> 
 
    <div class="header-right"></div> 
 
    
 
    </div> 
 
     
 
\t </header> 
 
    
 
    <section> 
 
    
 
    <div class="about-wrap"> 
 
    
 
    \t <div class="about-img"><img src="http://www.sidneyblake.com/wp-content/uploads/2015/06/Foggy-black-white-trees-alberta-landscape.jpg" ></div> 
 
    \t <div class="about-cnt"> 
 
    
 
    \t \t <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>

运行的代码片段看到的结果。

Answer 3

这些变化对你的CSS应该得到它非常接近你的reference image。

.about-ttl { 
    width: 20%; 
    float: left; 
    position: relative; 
    transform: rotate(-90deg) translateX(-50%); 
} 

.about-ttl h1 { 
    display: inline-block; 
    transform: translateY(-50%); 
    position: absolute; 
    right: -15px; /* Should match whatever the h1's letter-spacing length is. */ 
} 

https://jsfiddle.net/md4zpxwn/4/

总之，旋转和因此其边缘是针对上述.header-wrap元件冲洗翻译.about-ttl块。然后，所以它的边缘也齐平定位其子<h1>元素（占<h1>元素的15px字母间距）。此样式应适用于任意长度的文本（除“ABOUT”外）。如果你这样做，并且文中有空格，请务必将white-space: nowrap;加到.about-ttl。