在不使用 flexbox 的情况下对齐项目的顶部和底部

Question

There exist two items in a box and I'm trying to align the first item to the top of the box and the last item to the bottom of the box. I know I can do this easily with flexbox:

 .container { height: 150px; width: 100%; background-color: lime; display: flex; flex-direction: column; justify-content: space-between; }

 <div class="container"> <div>Top text</div> <div>Bottom text</div> </div>

Unfortunately, the platform I'm using (some old html to pdf generator) doesn't support flexbox. Is there another way to do this without using flexbox?

Answer 1

Just you can achieve using position relative and absolute as follow. I hope this will be helpful for you.

 .container > div { position: absolute; bottom: 0; } .container > div.top { bottom: inherit; top: 0; } .container { height: 150px; width: 100%; background-color: lime; position:relative; }

 <div class="container"> <div class="top">Top text</div> <div>Bottom text</div> </div>

Answer 2

You can use CSS positioning properties.

 .container { position: relative; height: 150px; width: 100%; background-color: lime; } .container > div { position: absolute; } .container > div:first-child { top: 0; /* optional */ } .container > div:last-child { bottom: 0; }

 <div class="container"> <div>Top text</div> <div>Bottom text</div> </div>

Just note that absolutely positioned elements are removed from the document flow. This means they don't respect the space occupied by surrounding elements, which can result in overlapping.

Answer 3

Here is another idea considering table where your elements will remain in-flow:

 .container { height: 150px; width: 100%; background-color: lime; display: table; } .container > div { display:table-row; } .container > div:first-child { height:100%; }

 <div class="container"> <div>Top text</div> <div>Bottom text</div> </div>