I'd like to achieve the following:
但它的几处伤口正在流血:
- 无法关闭
#div1
to top.
- 无法提供动态大小 (%) 值
#div2
,所以像h3
and h4
到目前为止我能做什么:http://jsbin.com/ivemal/30/ 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>
我认为我无法实现这一点的根本原因是旋转的文本。有人可以指导我,如何处理这个问题吗?
提前致谢!
HTML
<div id="outer">
<div id="inner"> <div>
<h3>text</h3>
<h4>text2</h4>
</div>
</div>
<div id="inner2">Other text...</div>
</div>
我改变了span
to a div
因为从技术上讲,你不能在 a 中包含块级元素(即标题)span
.
CSS
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;
}
See jsFiddle http://jsfiddle.net/Axaw5/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)