在引导列底部对齐div

如何在使用引导列时将父元素底部的div元素对齐？在引导列底部对齐div

.wrapper { 
 
    background-color: green; 
 
    height: 200px; 
 
} 
 

 
.bottom { 
 
    position: relative; 
 
} 
 

 
.bottom-div { 
 
    height: 200px; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="col-md-3 bottom"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>

底部div元件不在底部对齐。这样做的正确方法是什么？谢谢。

UPDATE：Div元素用完包装的（它基本上向上移动）

来源

2017-05-12 CiepCiep

您应该相对列，如果你想，要成为绝对定位的参考点。更现代的方法是使用flexbox。 – CBroe

@CBroe我根据您的建议进行了更新。仍然困惑。 – CiepCiep

请创建一个[mcve]。 – CBroe

不知道你想要做什么，因为@CBroe说Flexbox的将是最好的方式，但试试这个： -

/* CSS used here will be applied after bootstrap.css */ 
 
.wrapper{ 
 
    background-color:green; 
 
    height: 200px; 
 
    position: relative; 
 
    
 
} 
 
    
 
.bottom-div{ 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    bottom:0; 
 
    left: 0; 
 
    background-color: red; 
 
} 
 

 
.testclass { 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="col-md-3 testclass"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>

来源

2017-05-12 11:10:00

在引导列底部对齐div

回答

相关问题