html - 如何将容器 div 内的 div 垂直对齐到底部？

Question

我希望所有内容都垂直底部对齐，以便电话号码位于 <hr> 的正上方线而不是顶部。

<div>
	<div style="float:left; text-align: left;">
		Name<br/>
		555 main street<br/>
		City, State<br/>
		Country<br/>
		Zip<br/>
	</div>
	<div style="float:right; text-align: right;">
		Phone: 555-555-5555<br/>
		Cell: 555-555-5555<br/>
	</div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">

Answer 1

你可以像这样简单地使用flex:

.container {
  display: flex;
  align-items: flex-end; /* this will apply the bottom alignement*/
}

.container>div {
  flex: 1;
}

<div class="container">
  <div style="text-align: left;">
    Name<br/> 555 main street<br/> City, State<br/> Country
    <br/> Zip
    <br/>
  </div>
  <div style="text-align: right;">
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/>
  </div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">

还有另一种带有内联 block 元素的解决方案(如果需要，适用于旧浏览器):

.container {
  font-size: 0; /* remove white spaces*/
}

.container>div {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  font-size: initial;
}

<div class="container">
  <div style="text-align: left;">
    Name<br/> 555 main street<br/> City, State<br/> Country
    <br/> Zip
    <br/>
  </div>
  <div style="text-align: right;">
    Phone: 555-555-5555<br/> Cell: 555-555-5555<br/>
  </div>
</div>
<hr style="clear:left; border: none; border-bottom: 1px solid black">