我怎樣才能絕對相對於最後一行的底部定位一個多行文本塊？

我正在努力解決一個似乎應該可以通過CSS解決的問題 - 它在概念上很簡單，我會假設一個相對常見的問題，但如何實現它目前正在避開我！我怎樣才能絕對相對於最後一行的底部定位一個多行文本塊？

我有一個跨越100％寬度和100％高度的容器，並且我需要絕對定位具有可變數量行的文本塊，以便文本塊底部行的底部處於固定位置在容器中的垂直位置。我只能將它定位在相對於文本頂部的位置，這是不好的，因爲當有更多行時，它有時會溢出容器。

這是我的失敗嘗試相對於文本的頂部定位JSFiddle。

CSS：

html, body, l-container { 
    width:100%; 
    height:100%; 
} 

.l-container { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
} 

.caption { 
    position: relative; 
    width: 360px; 
    margin-left: -180px; 
    left: 50%; 
    top: 82%; 
    text-align: center; 
}

HTML：

<body> 
    <div class="l-container"> 
    <div class="caption">Multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multilinemultilinemultilinemultiline 
    </div> 
    </div> 
</body>

有誰知道這是在純CSS實現的？我寧願不必使用JS進行佈局，但是這個問題正在讓我把頭髮撕掉。

來源

2014-02-05 Alex H

如果您設置了bottom: 0並省略了任何top樣式，則絕對定位的div應該展開。

來源

2014-02-06 00:01:23 helion3

太簡單了，謝謝。 –

正如你在你的問題中提到的，這聽起來像你需要絕對定位。你的CSS只顯示相對位置。

替換此CSS：

.caption { 
    position: relative; 
    width: 360px; 
    margin-left: -180px; 
    left: 50%; 
    top: 82%; 
    text-align: center; 
}

...這一點：

.caption { 
    position: absolute; 
    width: 360px; 
    margin-left: -180px; 
    left: 50%; 
    bottom: 0; 
    text-align: center; 
}

見行動這裏一個例子： http://jsfiddle.net/be73v/1/

在一個不相關的音符，可能我建議你添加「margin：0; padding：0;」到你的「html，body，l-container」css來刪除不必要的滾動條。

來源

2014-02-06 00:09:24

我怎樣才能絕對相對於最後一行的底部定位一個多行文本塊？

回答

相關問題