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;
}
這需要響應,所以我更喜歡它,如果答案可以使用width: 100%
作爲鏈接div
感謝