如何設置「絕對文本底部」，以便進一步向上擴展文本？

這是很難解釋，所以我會盡我所能：如何設置「絕對文本底部」，以便進一步向上擴展文本？

我想文本內容被鉗位到一個div的底部 - 所以無論內容多長時間，它總是設置至底部。

所以，如果我有：

HEADER
內容1
含量2

內容2會從父div的底部一字排開約20像素的，如果我有：

HEADER
content 1

內容1將從底部排列大約20px父div，即使內容較少。

這可以在沒有表格的情況下動態完成嗎？

來源

2010-06-21 Walker

是的，只是包裝header和content單一div這樣的：

<div id="parent"> 
    <div class="to_bottom"> 
    <h1>Header</h1> 
    <p>Content 1</p> 
    <p>Content 2</p> 
    </div> 
</div>

然後使用這個CSS：

#parent { position: relative } 
.to_bottom { 
    position: absolute; 
    left: 0; 
    bottom: 20px; 
    width: 100%; 
}

更多信息：絕對定位可以相對於任何一側：頂部，左側，底部，右側。或者是一個組合。

因此：bottom: 0; right: 0錨定在右側和底部，但不是頂部或左側。它基本上變成：bottom: 0; right: 0; top: auto; left: auto。

同樣，使用bottom: 20px; left: 0將它錨定在底部左側，從底部向上20px。

來源

2010-06-21 03:47:45

但這不只是映射了div左上角的絕對位置？！？如果另一行內容被添加到該div，則左上角不會移動。它仍然是從底部20px。 – Walker 2010-06-21 03:51:30

試試吧，看看:)但我會爲你節省麻煩。它會按你想要的那樣工作。隨着更多內容被添加，'.to_bottom'的左上角將從底部保持「增長」。按照這種方式考慮，默認情況下'div'會盡量縮短內容。所以我將這個微型div固定在底部，但隨着內容的增加，它會增長。 * div中的內容*認爲它綁定在左上角，但實際div綁定在底部。隨着其內容的增長，左上角從底部進一步移開。 – 2010-06-21 03:56:34

<div> 
    <div id="header" style="position: absolute; top: 0px; left:0px; right: 0px; height:105px;"> 
    </div> 
    <div id="content" style="position: absolute; top: 105px; left:0px; right: 0px; bottom: 20px; height:105px;"> 
    </div> 
    <div id="footer" style="position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px;"> 
    </div> 
</div>

希望這給你一個想法......

來源

2010-06-21 03:37:42 gsblue

你誤會了，我知道div的佈局規則我希望div內的實際TEXT從下到上對齊。爲了給你一些觀點，我創建了一個從頁面底部打開並從數據庫填充的下拉菜單。所以我不知道菜單要多長時間，或者它有多少項目 - 所以我想把最後一行文字粘在底部。絕對定位將div對齊到頁面的底部，但不會根據內容進行調整，因爲div的「定位」元素位於左上角。 – Walker 2010-06-21 03:47:02

我似乎遇到了一個類似的問題，需要對齊div的底部，而不管上面的內容的高度。做一些搜索，我可以穿過jQuery UI position plugin，現在就開始看看它......也許對你有一些幫助。

來源

2010-06-21 03:57:36 garyj

如何設置「絕對文本底部」，以便進一步向上擴展文本？

回答

相關問題