CSS - 如何將元素定位到其父容器的底部？

在下面的示例中，我試圖將子div（粉紅色矩形）放置在其父div的底部。我試圖使用我發現this stackoverflow thread的建議，但它沒有幫助。有什麼想法？CSS - 如何將元素定位到其父容器的底部？

<html> 
<style type="text/css"> 
    .a {   
     background: gray; 
     height: 80px; 
    } 
    .b { 
     background: pink; 
     float: right;        
     bottom: 0px; 
    } 
</style> 
<body> 
<div class="a"> 
    the parent 
    <div class="b"> child 
    </div> 
</div> 
</body> 
<html>

來源

2010-01-12 GyRo

我不太清楚明白你的意思是「躺在底部」。你能否給我們一個更詳細的例子。 – ALOToverflow 2010-01-12 17:20:11

被對齊到底部。「粘」到底部 - 粉紅色矩形的下邊緣與灰色矩形的下邊緣位於同一條線上。 – GyRo 2010-01-12 17:22:36

編輯： HTML全文顯示什麼在評論中討論。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    .a {   
     background: gray; 
     position: relative; 
    } 
    .b { 
     background: pink; 
     position: absolute; 
     bottom: 0px; 
     right: 0px; 
    } 
</style> 
<body> 
<div class="a"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut quam sapien, id dictum purus. Ut vel consectetur justo. Sed suscipit justo ullamcorper diam interdum laoreet pulvinar nisl laoreet. Sed sem est, feugiat commodo bibendum vel, laoreet ac sapien. Fusce nisl nulla, commodo ut ultricies ut, iaculis a dolor. Nunc ultrices elit at tellus scelerisque vel vestibulum justo pretium. Suspendisse potenti. Suspendisse nec felis sem. Donec at tellus dolor, vehicula placerat lacus. Ut non libero at massa convallis imperdiet non rhoncus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nibh velit, congue quis tincidunt sed, feugiat a turpis. Phasellus erat justo, dictum non iaculis sit amet, auctor quis neque. Cras leo tortor, consequat non tincidunt sed, lacinia ut nibh. Etiam eu mollis quam. In eu felis velit, at bibendum sapien. Aenean sed est urna. Sed dignissim dapibus dolor sed pellentesque. Aliquam viverra ipsum sit amet justo gravida in facilisis sapien volutpat. 

    <p>Suspendisse commodo vulputate nunc, vitae commodo tellus varius eu. Donec adipiscing diam vel felis blandit lobortis. Donec et turpis nunc. Curabitur ac elementum mi. Aenean libero ipsum, lacinia sit amet ornare sed, sollicitudin quis libero. Vestibulum ullamcorper ullamcorper luctus. Aenean pretium ornare tempor. Sed ultricies eros sem. Aenean placerat tristique tellus nec sodales. Proin sed justo non libero condimentum commodo. Quisque sed nisl nisi, vel mattis nisl. Phasellus rhoncus pharetra egestas. Quisque nec arcu ac neque placerat rutrum. In feugiat justo ac orci dignissim rhoncus. Mauris vitae fringilla magna. 

    <p>Nam sagittis erat id sapien lacinia ultrices. Pellentesque ultrices, justo vitae blandit convallis, felis mi laoreet sem, in pharetra libero mauris eget nisl. Etiam in mi eget elit bibendum consectetur et nec nibh. Curabitur in justo arcu. Morbi eget venenatis enim. Duis tempor quam lacinia elit consequat sit amet blandit dolor vulputate. Aenean massa libero, suscipit eu tristique id, imperdiet pellentesque justo. Proin rutrum erat sit amet orci iaculis ut lobortis turpis sagittis. Nam luctus mollis mi, nec laoreet urna semper vitae. Pellentesque in massa enim. Etiam fermentum urna vitae lorem consequat pretium. Maecenas id ligula diam, id consectetur purus. Vestibulum libero velit, tempor hendrerit posuere ut, rutrum nec velit. Suspendisse id pulvinar erat. Sed vulputate, nibh id vulputate vestibulum, dolor elit tincidunt est, sed varius neque tellus tincidunt erat. Nunc volutpat eros in diam semper dictum. Quisque ut ligula felis. 

    <p>Ut pharetra feugiat nisi eu viverra. Praesent sollicitudin iaculis elit, ac lobortis ante consectetur sed. Nullam sit amet enim eget massa dapibus molestie. Donec orci diam, tempor sit amet aliquet eget, placerat in nulla. Sed et sollicitudin mi. Donec pulvinar elit pharetra urna ornare sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mi libero. Ut et ipsum nec enim adipiscing pellentesque a nec quam. Pellentesque viverra, enim id auctor lacinia, turpis leo blandit odio, et luctus orci purus at nunc. Morbi eu sem id diam aliquam egestas. Vestibulum hendrerit lobortis est a convallis. Nunc quis quam odio, a eleifend dolor. 

    <p>Vivamus sollicitudin convallis diam, ut luctus ipsum viverra in. Morbi sit amet sapien urna, sit amet dictum nisi. Duis elit tortor, iaculis nec feugiat in, aliquam ut nisl. Nulla scelerisque sagittis aliquam. Ut tempus auctor tempus. Aliquam auctor vulputate volutpat. Praesent libero orci, volutpat a volutpat ac, vulputate at enim. Phasellus semper sem sed velit bibendum tempus. Aenean ut mauris nisl. Nam sit amet ipsum arcu. Phasellus pretium venenatis egestas. Ut in nulla sem. Proin aliquet facilisis lectus non consequat. Nullam vel magna et ligula viverra sagittis. Fusce in massa in quam vehicula convallis. Nullam placerat erat in nunc eleifend sed dapibus elit tempor. 

    <p>Aliquam in erat mi. Suspendisse dui dui, facilisis ac lobortis id, mollis quis enim. Aliquam erat volutpat. Sed in porta arcu. Maecenas aliquam congue sem, at scelerisque odio pharetra ac. In egestas rutrum cursus. Aliquam erat volutpat. Etiam a libero risus. Morbi odio eros, sollicitudin vel mattis vel, aliquet a elit. Suspendisse vel lectus risus, in iaculis ipsum. Etiam vitae justo nibh, non bibendum purus. Quisque mi erat, accumsan sit amet fringilla eu, rhoncus sed ipsum. Ut ac leo a nunc accumsan placerat at ut mauris. Aliquam imperdiet urna urna. 

    <div class="b"> child 
    </div> 
</div> 
</body> 
<html>

來源

2010-01-12 17:21:09

這是怎麼回事？我剛剛測試過它...... – 2010-01-12 17:26:15

我不明白倒票，所以我向你投票（爲了提供正確的答案）來恢復一些業力。雖然我建議解釋你的答案可能會有所幫助，因爲這個問題意味着OP對CSS的新的或沒有經驗的。 – 2010-01-12 17:28:04

我不知道CSS有什麼推理:) – 2010-01-12 17:31:19

使父母「位置：相對」和孩子「位置：絕對」。然後，你可以定位子「右：0;底部：0」

<html> 
<style type="text/css"> 
    .a {    
     position: relative; 
     background: gray; 
     height: 80px; 
    } 
    .b { 
     background: pink; 
     position: absolute;   
     bottom: 0px;  
     right: 0px; 
    } 
</style> 
<body> 
<div class="a"> 
    the parent 
    <div class="b"> child 
    </div> 
</div> 
</body> 
<html>

來源

2010-01-12 17:21:13

完美，謝謝:)我總是把這混在一起。 – gakera 2010-11-20 19:52:08

爲了使用位置屬性（top，right，bottom，left），元素的position CSS屬性必須relative，absolute，或fixed。

此外，位置將相對於元素的偏移父親進行計算。爲了使它們相對於您的.a元素，它需要有position: relative。

在你的情況，你需要寫

.a { 
    background: gray; 
    height: 80px; 
    position: relative; 
} 

.b { 
    background: pink; 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
}

來源

2010-01-12 17:21:31 SLaks

如果我不能讓父母的位置是相對的，那該怎麼辦？在這種情況下可以做些什麼？ – GyRo 2010-01-12 18:45:53

爲什麼你不能讓父母的位置：親戚？ – SLaks 2010-01-12 20:26:44

.B需要position:relative;絕對會根據窗口大小定位它，而不是他的父母。

還有vertical-align由一羣其他答案提到它給你「真」底部對準，但其僅與如表小區

來源

2010-01-12 17:24:11 antpaw

的最佳方式表顯示屬性可用使用相對/絕對（）。另一種方法（如父母雙方都知道身高）是爲孩子設置一個頂部邊距：

.a {   
    background: gray; 
    height: 80px; 
} 

.b { 
    background: pink; 
    float: right;  
    height: 20px; 
    margin-top: 60px;      
}

來源

2010-01-12 20:09:18

CSS - 如何將元素定位到其父容器的底部？

回答

相關問題