如何将div bootstrap网格中的文本对齐到底部？

Question

这是我所做的示例代码。

https://jsfiddle.net/gnqpbmrd/6/

如何将文本与div的底部对齐？我希望日期是div的底部。

vertical-align:bottom

我试图垂直对齐但不起作用。感谢。

Answer 1

在使用flex时，您可以使用属性align-self: flex-end。

.row-height, .col-xs-5 {
   display: flex;
}

#address { 
   align-self: flex-end;
}

DEMO

Answer 2

为#addres

应用css代码

#address{
  bottom: 0;
  position: absolute;
}

所以它的工作

Answer 3

将position: absolute和bottom: 0应用于#address。

＆＃13;

＆＃13;

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

.row-height {
  display: flex;
}

#address {
    position: absolute;
    bottom: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row row-height'>
    <div class="col-xs-7">
    <div id="address-billing">
				<p class="address-label"><strong>abc</strong></p>
				<p class="address-content">
					abc<br>abc<br>abc
				</p>
			
					<p class="content" style="font-weight: bold;padding-top: 10px"> abc</p>
	
					<p class="content" style="font-weight: bold"> E-mail:</p>
	
			</div>
    </div>
    <div class="col-xs-5">
    <div id="address">
				<p>
			
					<p style="margin-bottom: 0px;"><span class="date-field">Issue Date: </span><span class="issue-date"><strong>abc</strong></span></p>
			
				<p><span class="date-field">Delivery Date: </span><span class="delivery-date"><strong></strong></span></p>
				</p>
			</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;