如何用容器div對齊一個div頂部和另一個底部？

Question

底部div似乎與頁面底部對齊，而不與容器div對齊。 我需要將底部的一個與容器DIV的底部對齊。

碼：

 #container { border: 1px solid red; height: 300px; } #top { border: 2px solid red; display: inline-block; vertical-align: top; position: absolute; top: 0; } #bottom { border: 2px solid red; vertical-align: bottom; width: 100px; position: absolute; bottom: 0; } 

 <div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div> 

Answer 1

只需給出您的#container position:relative;

 #container { border: 1px solid red; height: 300px; position: relative; } #top { border: 2px solid red; position: absolute; top: 0; } #bottom { border: 2px solid red; width: 100px; position: absolute; bottom: 0; } 

 <div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div> 

或者，您可以使用flexbox ：

 #container { border: 1px solid red; height: 300px; position:relative; display: flex; /* add this */ } #top { border: 2px solid red; position: absolute; top: 0; } #bottom { border: 2px solid red; width: 100px; align-self: flex-end; /* and this */ } 

 <div id="container"> <div id="top"> test<br /> test <br /> test <br /><br /> test test test test<br /> </div> <div id="bottom">bottom</div> </div> 

Answer 2

您#container ， #container必須處於position: relative;

絕對始終是最接近的相對元素。 在這種情況下，您沒有相對元素，因此它將默認為body 。 通過為#container相對值， #bottom將相對於#container定位

#container {
  position: relative;
  border: 1px solid red;
  height: 300px;
}

Answer 3

您只需設置其父position:relative ，便會考慮其主體。

 #container {
        border: 1px solid red;
        height:300px;
        position:relaive;
    }