浮動div不會給全高

左紅色div將不會完全放下。無論主（「李」）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>

或者，也許有這樣做的更好的方法。

來源

2012-06-13 nn2

清理一點點 - 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-13 00:19:55