问题描述
我正在尝试将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>
感谢您的帮助!
解决方法
如果将父容器转换为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>
,
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>