html - 如何在没有绝对定位的情况下将一个元素垂直对齐到另一个元素的底部？

Question

我有一个垂直导航菜单，旁边有一张图片。所以现在导航菜单和图片垂直对齐到顶部。我希望它位于底部，例如导航菜单，以在图像所在的同一点垂直结束。我该如何使用绝对定位来做到这一点？

 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Reviews</a></li>
 </ul>

 <img src="pic.jpg">

CSS:

 ul {
    float: left;
    text-align: right;
 }

 ul li {
    padding-top: 5px;
 }

 ul li a {
    background: yellow;
    display: inline-block;
    padding: 10px 35px;
    font-size: 20px;
 }

 img {
    width: 230px;
    height: auto;
    float: left;
 }

我不想使用绝对位置，因为图像应该与导航菜单互连(它应该是一个人的 png 图片，按钮来自他身后)所以我担心它可能如果有人在他们的浏览器中使用了不同的字体大小，事情就会变得一团糟。

Answer 1

您可以使用 display: table; 来实现这一点。

为 ul 和 img 创建一个包装元素，并给它 display: table;。 ul 和 img 应该有 display: table-cell; vertical-align: bottom; 然后。如果你这样做，你不需要在 ul 或 img 上使用 float: left;。

演示:http://jsfiddle.net/xq6SY/

HTML

<div class="wrapper">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Reviews</a>
        </li>
    </ul>
    <img src="pic.jpg">
</div>

CSS

.wrapper {
    display: table;
}
ul {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}
ul li {
    padding-top: 5px;
}
ul li a {
    background: yellow;
    display: inline-block;
    padding: 10px 35px;
    font-size: 20px;
}
img {
    width: 300px;
    height: auto;
    display: table-cell;
    vertical-align: bottom;
}