如何用容器div对齐一个div顶部和另一个底部？

Question

Seems the bottom div is aligned bottom to the page but not to the container div. I need to align the bottom one to the bottom of the container DIV.

Code:

 #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

Simply give your #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> 

Alternatively you could go with 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

You're almost there, #container has to be position: relative;

Absolute is always to the closest relative element. In this case you have no relative elements, so it will default to body . By giving #container the relative value, #bottom will be positioned relative to #container

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

Answer 3

All you need to set its parent position:relative then it will consider its body.

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