2

我想实现以下目标：在此处输入图像描述

但它的几处伤口正在流血：

  • 无法靠近#div1顶部。
  • 不能给 dinamic size (%) 值#div2，所以喜欢h3和h4

到目前为止我能做什么：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>

我认为我无法做到这一点的根本原因是旋转的文本。有人可以指导我，如何处理这个问题？

提前致谢！

4

2 回答 2

3

HTML

<div id="outer">
    <div id="inner"> <div>
        <h3>text</h3>
        <h4>text2</h4>
      </div>

    </div>
    <div id="inner2">Other text...</div>
</div>

我将其更改span为 adiv因为从技术上讲，您不能在 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;
}

请参阅jsFiddle。

于 2013-07-05T13:22:27.930 回答
0

我不知道我是否理解正确，但这是你想要得到的吗？

http://jsbin.com/ivemal/38/

于 2013-07-05T13:34:47.833 回答