3

jsフィドル

左の赤い 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

そのためにjQueryを使用できます：http：//jsfiddle.net/SF24t/

または、場合によっては役立つトリックがあります。たとえば、両方の「ボックス」を一番下までの境界線で区切って、その境界線を背景画像に繰り返し-yでペイントすることができます。

于 2012-06-13T00:34:10.437 に答える
0

このページは正しい方向にあなたを導くかもしれません：

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

于 2012-06-13T00:16:24.903 に答える