正確定位旋轉文本（帶字母間距/ html5 / CSS）

Question

我已經閱讀並嘗試了關於Stackoverflow上關於這個主題的大部分答案，但似乎沒有一個對我有用（旋轉是，正確定位沒有）。 我的問題：

• 旋轉文字-90度
• 正確定位-90度文本如下圖所示（最終結果）。
• 代碼應該適用於響應式設計（％）

我在JSFiddle中添加了完整的代碼（包括我在內容上方的標題）。 我添加了灰色標題，以澄清在圖像/標題/文本開始之前有上面的內容： 鏈接到JSFiddle代碼

你如何（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>

提前致謝。

Answer 1

使用css旋轉

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

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

Answer 2

1. 使用CSS3轉換屬性來旋轉文本。
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 { font-size: 1em; font-weight: bold; font-family: 'Montserrat', sans-serif; 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 { font-family: 'Maven Pro', sans-serif; padding: 0; margin: 0; } /* Section styles */ .about-wrap { width: 100%; clear: both; } .about-img { width: 50%; float: left; } .about-cnt { width: 50%; float: right; } .about-ttl { width: 20%; float: left; } .about-txt { width: 60%; margin-right: 20%; float: right; } 

  <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 3

對CSS的這些更改應該使它非常接近您的參考圖像 。

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

總之，旋轉並轉換.about-ttl塊，使其邊緣與上面的.header-wrap元素齊平。 然后定位其子<h1>元素，使其邊緣也是齊平的（考慮<h1>元素的15px字母間距）。 這種樣式應該適用於任意長度的文本（除了“關於”）。 如果你這樣做，並且文本中有空格，請務必添加white-space: nowrap; 到.about-ttl 。