Question

我希望所有内容都垂直对齐到底部，这样电话号码就在<hr>行的正上方，而不是在顶部。

＆＃13;

<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">

＆＃13;

Answer 1

您可以像这样使用flex：

＆＃13;

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

＆＃13;

<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">

＆＃13;

另一种带有内联块元素的解决方案（如果需要，可用于旧浏览器）：

＆＃13;

.container {
  font-size: 0; /* remove white spaces*/
}

.container>div {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  font-size: initial;
}

＆＃13;

<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">

＆＃13;

如何将容器div中的div垂直对齐到底部？

1 个答案: