CSS - 將 div 與他的父 div 的底部對齊

Question

我正在嘗試將 div # alignBottom1 和 # alignBottom2 向下對齊，而不從父 div 中移除浮動左側，並且不使用絕對位置或頂部邊距。

我能怎么做？

這是我的代碼：

 #TotContainer { height: 900px; } #container { max-height: 90% } .col-sm-6 { width: 50%; float: left; height: 100%; padding: 10px; } .col-sm-12 { width: 100%; float: left; background: yellow; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 <div id="TotContainer"> <div id="container"> <div class="col-sm-6" style="background:blue;">XXXXXX</div> <div class="col-sm-6" style="background:red;"> <div id="alignBottom1">Text to align at the bottom 1</div> <div id="alignBottom2">Text to align at the bottom 2</div> </div> <div class="col-sm-12">footer</div> </div> </div>

謝謝你的幫助！

Answer 1

如果你把父容器變成一個 flexbox，你可以很容易地做到這一點。

在您的示例中，我為父級提供了一個高度值，以便您可以看到使用 flexbox 並將內容對齊到其父級末尾的效果。

 #alignBottom { display: flex; flex-flow: column nowrap; justify-content: flex-end; height: 100px; /* giving the element a height to exaggerate the effect */ } #TotContainer { height: 900px; } #container { max-height: 90% } .col-sm-6 { width: 50%; float: left; height: 100%; padding: 10px; } .col-sm-12 { width: 100%; float: left; background: yellow; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 <div id="TotContainer"> <div id="container"> <div class="col-sm-6" style="background:blue;">XXXXXX</div> <div id="alignBottom" class="col-sm-6" style="background:red;"> <div id="alignBottom1">Text to align at the bottom 1</div> <div id="alignBottom2">Text to align at the bottom 2</div> </div> <div class="col-sm-12">footer</div> </div> </div>

Answer 2

CSS flexbox 以多種方式幫助對齊容器內的內容，只需幾行代碼。 這可能對你有用。

 #TotContainer { height: 900px; } #container { max-height: 90% } .col-sm-6 { width: 50%; float: left; height: 100%; padding: 10px; } .col-sm-6:nth-child(2){ /* adding this */ display: flex; flex-direction: column; justify-content: flex-end; /* adding some height to the container for better visibility od effect */ height: 80px; } .col-sm-12 { width: 100%; float: left; background: yellow; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 <div id="TotContainer"> <div id="container"> <div class="col-sm-6" style="background:blue;">XXXXXX</div> <div class="col-sm-6" style="background:red;"> <div id="alignBottom1">Text to align at the bottom 1</div> <div id="alignBottom2">Text to align at the bottom 2</div> </div> <div class="col-sm-12">footer</div> </div> </div>