將文本對齊到列的底部（不使用表格單元格）

Question

我想將div /文本對齊到列的底部但沒有成功。如果可以避免的話，我寧願不使用表格單元格。

#jBtn { 
 
    position: relative; 
 
    float: right; 
 
    border: 1px solid #fff; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
} 
 

 
#jTxt { 
 
position: absolute; 
 
bottom: 0; 
 
width: 100%; 
 
padding: 25px; 
 
}

<div id="jTxt"> 
 
    <div class="col-md-6"> 
 
    <h1>Something Something</h1> 
 
    <h2>sub-Title</h2> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
    <div id="jBtn"><i class="fa fa-arrow-down fa-2x"></i> 
 
    </div> 
 
    </div> 
 
</div>

我想保持#jBtn留在bottom。即使position: absolute似乎並沒有工作。

編輯：

我需要jTxt格保持在其父的底部，因此它需要保持的位置是：絕對

Answer 1

如果您在jBtn的父母<div class="col-md-6">與position: absolute上jBtn設置position: relative在一起它應該工作。

在這裏，我添加了一個新的類，po-re，不要弄亂col-md-6類。

HTML

<div class="col-md-6 po-re"> 
    <div id="jBtn"><i class="fa fa-arrow-down fa-2x"></i></div> 
</div> 

CSS

.po-re { 
    position: relative; 
} 

#jBtn { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 50px; /* adjust to your values */ 
    height: 20px; /* adjust to your values */ 
    border: 1px solid #fff; 
    border-radius: 50%; 
    color: #fff; 
}