将当前浮动的div对齐而不更改HTML

Question

问题

我有一个带有基本HTML结构的标题

<div id="header">
  <div id="logo"></div>
  <div id="navigation"></div>
  <div id="userInfo"></div>
  <div class="headRight"></div>
  <div id="callCenter" class="headRight"></div>
</div>

我无法更改HTML。目前，它使用浮点数进行布局，并使用navigation将padding-top与标题的底部对齐。但是，它仅在userInfo为2行时有效，并且可以为3或4。

我需要做什么

仅使用CSS，将navigation对齐所有导航高度的底部，同时保持原始布局。

我尝试了什么

六个堆栈溢出解决方案，包括父级的经典position:absolute和vertical-align:bottom。 （前者破坏了文档流程，后者似乎无法工作，因为其他元素妨碍了。）

小提琴

尽我所能清理小提琴，但检查可能仍然是最简单的。 https://jsfiddle.net/ohrhe4u5/1/

笔记：

1. 标签应该只是触摸标题的底部。
2. callCenter在此示例中也未对齐，但您可以忽略。它的优先级要低得多。

新小提琴

我将header，logo和navigation更改为display:inline-block，允许userInfo向右浮动，给予中殿额外的高度以确保＆＃ 39; s总是空间，绝对定位headRight项。

这让我不知所措。由于绝对定位和强制导航高度更大，有点janky。有更好的想法吗？ https://jsfiddle.net/ohrhe4u5/2/

Answer 1

我一般不喜欢float定位我可以帮助它（这是个人偏好，因为我发现它有时令人痛苦的不可预测），因此，使用position:absolute，{{1}的组合和min-height我相信我重新创造了你所追求的东西。

基本上这个解决方案的工作原理是margin我们对（徽标和导航）的一致大小有所了解的元素，然后让header元素从用户数据中获取position:absolute和右边的链接。我们在标题元素中添加height，这样如果用户数据减少到2行，高度仍足以容纳绝对定位的元素（因为它们不再影响标题元素的高度） min-height）。

<强> JSFIDDLE

<强> CSS

absolute