定位绝对定位的旋转文本
定位绝对定位的旋转文本
提问于 2018-06-06 03:08:19
我真的很难定位一个转换，旋转的文本。无论是垂直还是水平方向，我都不知道如何定位旋转后的文本rotateText，因此它是相对容器#tslotBlock1inner中的bottom: 60px和left: 10%。
然后，如果您单击下面的jsfiddle链接并将视区更改为640px或更小，您将看到旋转的文本完全消失，即使使用left:30%也是如此。
我已经包括了下面的图像，我希望它的位置。有人能帮我解释一下我做错了什么吗？
Jsfiddle link to see mobile version
.sec90 {
width: 90%;
margin: 20px auto 60px auto;
}
.rotateText {
position: absolute;
top: 50%;
bottom: 60px;
left: 2%;
-webkit-transform: rotate(-90deg) translateX(-50%);transform: rotate(-90deg) translateX(-50%);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}
#tslotSec {
margin: 60px auto;
}
#tslotBlock1 {
display: inline-block;
vertical-align: top;
}
#tslotBlock1 {
width: 70%;
}
#tslotBlock1:after {
content: '';
display: inline-block;
background: #b82222;
width: 8px;
height: 70%;
vertical-align: middle;
}
#tslotBlock1inner {
padding-right: 10%;
position: relative;
}
#tslotBlock1inner img {
width: 35%;
height: auto;
margin-left: 30%;
}
.dG {
font-size: 1.1rem;
line-height: 1.5em;
font-family: 'Nunito', sans-serif;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
@media screen and (max-width:640px) {
.rotateText {
bottom: 0px;
left: 30%;
-webkit-transform: rotate(-90deg) translateX(0%);transform: rotate(-90deg) translateX(0%);
font-size: 1.5rem;
}
}<section class="sec90" id="tslotSec">
<div id="tslotBlock1">
<div id="tslotBlock1inner">
<h2 class="blockTG">Advantages</h2>
<p class="dG">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p class="dG">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<div class="rotateText">Advantages</div>
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782">
</div>
</div>
</section>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-06 04:22:56
对于作为页面内容一部分的元素，我更喜欢避免使用position: absolute;，所以我改用float。我还设置了transform-origin，因为相对于对象边界框的中间位置，相对于固定点通常更容易确定位置：
.rotateText {
float: left;
transform-origin: top left;
-webkit-transform: rotate(-90deg) translateX(-100%);
transform: rotate(-90deg) translateX(-100%);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}Stack Overflow用户
发布于 2018-06-06 04:12:26
我更新了你的变换并删除了位置
.rotateText {
position: absolute;
-webkit-transform: rotate(-90deg) translate(-100px, -100px);
transform: rotate(-90deg) translate(-100px, -100px);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}Stack Overflow用户
发布于 2018-06-06 04:16:51
我同意DavidW的观点。我添加了一些定位和底部属性，以保持图像旁边的文本。
.rotateText {
float: left;
position: relative;
bottom: 0px;
transform-origin: top left;
-webkit-transform: rotate(-90deg) translateX(-100%);
transform: rotate(-90deg) translateX(-100%);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50707304
复制相关文章
相似问题