Question

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

旋转文字-90度
正确定位-90度文本，如下图所示（最终结果）。
代码应适用于响应式设计（％）

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

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

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

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

Answer 2

使用CSS3 transform property旋转文字。
从顶部应用适当的边距以定位它。

＆＃13;

/* 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;	
}

＆＃13;

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

＆＃13;

运行代码段以查看结果。

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/

总之，旋转并翻译.about-ttl块，使其边缘与上面的.header-wrap元素齐平。然后定位其子<h1>元素，使其边缘也是齐平的（考虑<h1>元素的15px字母间距）。这种样式应适用于任意长度的文本（除了＆＃34;关于＆＃34;）。如果您这样做，并且文字中有空格，请务必将white-space: nowrap;添加到.about-ttl。

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

3 个答案: