3

jsFiddle

左边的红色 div 不会一直向下。无论主（“li”）div有多高，我都希望它一直向下。

css

.li_wrap {
    padding:7px;
    float:left;
}
.song-list li{
    position: relative;
    display: block;
    padding:0;
    margin-bottom:10px;
    background: black;
    color: yellow;
    z-index:7;
    text-decoration: none;
}
.rank_pos {
    background:red;
    margin:0;
    padding:3px;
    height:100%;
    float:left;
}
body {font-size:12px; font-family:Verdana, serif;}

html

<ul class="song-list">
  <li id="1">
  <div class="rank_pos">1st</div>

  <div class="li_wrap">Testing</div>

  <div style="clear:both;"></div>
  </li>

  <li id="2">
  <div class="rank_pos">2nd</div>

  <div class="li_wrap">Testing</div>

  <div style="clear:both;"></div>
  </li>
</ul>​

或者也许有更好的方法来做到这一点。

4

3 回答 3

3

稍微清理一下 - http://jsfiddle.net/gDByS/2/

HTML

  <li>
      <span>3rd</span>
      <div>Testing<br />Testing<br />Testing<br />Testing<br />Testing</div>
  </li>

CSS

.song-list li{
    position: relative;
    display: block;
    padding:0;
    margin-bottom:10px;
    background: black;
    color: yellow;
    z-index:7;
    text-decoration: none;
    overflow: hidden;
    line-height: 22px;
}

ul li span{
    background:red;
    margin:0;
    padding: 0 5px;
    height:100%;
    display: block;
    position: absolute;
}

ul li div {
    margin-left: 40px;
}
于 2012-06-13T00:19:55.283 回答
0

此页面可能会引导您朝着正确的方向前进：

http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

于 2012-06-13T00:16:24.903 回答
0

您可以为此使用 jQuery：http: //jsfiddle.net/SF24t/

或者有一个技巧在某些情况下会有所帮助：例如，如果您希望两个“框”由一直到底部的边框分隔，您可以使用 repeat-y 在背景图像中绘制该边框

于 2012-06-13T00:34:10.437 回答