旋转的文本表现奇怪 [英] Rotated text behaves strange
本文介绍了旋转的文本表现奇怪的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想达到以下效果:
但它从几个伤口出血:
- 无法关闭
#div1
到顶部。
- 无法将dinamic大小(%)值赋予
#div2
c $ c> h3 和h4
- Can't close
#div1
to top. - Can't give dinamic size (%) value to
#div2
, so likeh3
andh4
到目前为止,我可以做的是:
http://jsbin.com/ivemal/30/
What I can do so far: http://jsbin.com/ivemal/30/
html代码:
<ul>
<li>
<div id="div1">
<h3> Title </h3>
<h4> SubTitle </h4>
</div>
<div id="div2">
...
</div>
</li>
<li>
...Same...
</li>
...
</ul>
我认为根本原因我无法实现这一点,是旋转的文本。有人可以指导我,如何处理这个问题?
I think the root cause I can't achieve this, is the rotated text. Can someone guide me, how to handle this problem?
提前感谢!
推荐答案
HTML
HTML
<div id="outer">
<div id="inner"> <div>
<h3>text</h3>
<h4>text2</h4>
</div>
</div>
<div id="inner2">Other text...</div>
</div>
我将 span
更改为 div
因为技术上你不能在 span
内有块级元素(即标题)。
I changed the span
to a div
because technically you cannot have block-level elements (i.e. headings) within a span
.
html, body {
margin: 0;
}
#outer {
background: green;
}
#inner {
background:#e3e3e3;
height:100px;
width:50px;
float: left;
}
#inner > div {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
line-height: 0;
}
#inner2 {
margin-left:70px;
background:#e3e3e3;
}
#inner2::after {
display: table;
content: '';
clear: both;
}
查看 jsFiddle 。
这篇关于旋转的文本表现奇怪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文