在引導列底部對齊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

回答

相關問題