将文本对齐到列的底部（不使用表格单元格）

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; 
}