从下到上堆叠多个 div答案

【问题标题】：Stacking Multiple Divs From Bottom to Top从下到上堆叠多个 div
【发布时间】：2014-06-23 14:34:54
【问题描述】：

我正在尝试将多个 div (buttonNav) 对齐到容器 div (lowerNav) 的底部。我已经阅读了有关此问题的所有问题并尝试了 CSS，但它似乎不起作用。我试过这个：Stacking Divs from Bottom to Top 和其他人，希望有人能提供帮助。

这是我的 html，我有 5 个 lowerNav 容器，每个容器都有多个 buttonNav，我想将它们与 lowerNav 的底部对齐这是其中的代码，它们的设置方式都相同：

<div class="lowerNav">
  <img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
  <div class="buttonNav">
    <p><a href="">Order Literature</a></p>
  </div>
  <div class="buttonNav">
    <p><a href="">Downloads</a></p>
  </div>
  <div class="buttonNav">
    <p><a href="">Email Sign-Up</a></p>
  </div>
  <div class="buttonNav">
    <p><a href="">Meet Your Rep</a></p>
  </div>
  <div class="buttonNav">
    <p><a href="">Ask a Question</a></p>
  </div>
 </div>

这是我的 CSS：

.lowerNav {
 width: 160px;
 height: 325px;
 background-color: #e3dfd7;
 border: 3px solid #383431;
 float: left;
 margin: 15px 8px 0px 8px;
     text-align: left;
display: table-cell;
    vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
    }
.lowerNav img {
padding-top: 12px;
    }
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
    }
.buttonNav p {
text-align:center;
padding-top: 14px;
    }
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
    }
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
    }

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

由于容器 (.lowerNav) 具有固定高度，并且您知道其内容的大小，因此使用绝对定位很容易做到。

HTML：

<div class="outer">
  Hello up here!

  <ul class="inner">
    <li><a href="#">Hello</a></li>
    <li><a href="#">down</a></li>
    <li><a href="#">there!</a></li>
  </ul>
</div>

CSS：

.outer {
  position: relative;
  height: 200px;
}

.inner {
  position: absolute;
  bottom: 0;
}

查看此 CodePen 以获取此代码的实时示例：http://codepen.io/EvilOatmeal/pen/fCzIv

【讨论】：