2015-02-23 99 views
0

我一直在嘗試創建一個Feed頁面,並且我希望它完全響應。佈局是右邊的一個分數,固定的寬度和左邊的鏈接應該佔據水平空間的其餘部分。如何用div來填充水平空間

我到目前爲止的代碼有鏈接只是佔用了整條線,並通過比分div。

這將是一個問題,如果鏈接標題太長,以至於得分被切斷,因爲我無法在鏈接div的寬度發生碰撞時停止鏈接div的寬度,在這種情況下,我想使用text-overflow: ellipsis功能。

我的代碼是下面一個的jsfiddle鏈接沿着

HTML

<body> 
    <ul id="tracklist"> 
     <li class="trackwrap"> <a class="tracklink" href="#">Link 1</a> 

      <p class="trackscore">x score</p> 
     </li> 
    </ul> 
</body> 

CSS

#tracklist { 
    margin: 0; 
    position: relative; 
    list-style-type: none; 
    background: white; 
    padding: 10px 20px 10px 20px; 
} 
.trackwrap { 
    position: relative; 
    margin: 0; 
    width: 100%; 
    height: 24px; 
    transition: 1s; 
    margin-bottom: 2px; 
    transition: 1.5s; 
} 
.tracklink { 
    background: red; 
    margin: 0; 
    display: inline; 
    position: absolute; 
    left: 3px; 
    width: 100%; 
    max-height: 24px; 
    font-size: 16px; 
    line-height: 24px; 
} 
.trackscore { 
    background: blue; 
    margin: 0; 
    display: inline; 
    position: absolute; 
    right: 52px; 
    font-size: 14px; 
    color: white; 
    text-align: right; 
    line-height: 24px; 
} 

http://jsfiddle.net/4Lf8v9tn/

這需要響應,所以我更喜歡它,如果答案可以使用width: 100%作爲鏈接div

感謝

回答