Html 如何在没有绝对定位的情况下将一个图元与另一个图元的底部垂直对齐？

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

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

---

我不想使用绝对位置，因为图像应该与导航菜单相互连接（应该是一张有按钮的人的png图片），所以我担心如果有人在浏览器中使用不同的字体大小，可能会把事情搞砸。

您可以使用

显示：table以实现此目的

为
ul
和
img
创建一个包装元素，并给它
display:table
ul
和
img
应具有
显示：表格单元格；垂直对齐：底部对齐然后。您不需要
float:left在
ul
或
img
上，如果您这样做

演示：

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>

尝试此代码，即使我将其按到屏幕底部）









* {
保证金：0；
}
html，正文{
身高：100%；
}
.换页{
最小高度：100%；
/*等于页脚高度*/
边缘底部：-142px；
}
.换页：之后{
内容：“；
显示：块；
}
.站点页脚，.换页：之后{
/*。推压高度必须与页脚高度相同*/
/*高度：142px*/
}
.网站页脚{
背景：白色；
}
保险商实验室{
/*浮动：左*/
文本对齐：右对齐；
显示：内联块；
}
ulli{
垫面：5px；
}
ullia{
背景：黄色；
显示：内联块；
填充：10px 35px；
字体大小：20px；
}
img{
宽度：230px；
高度：自动；
显示：内联块；
垂直对齐：底部对齐；
}
您可以执行以下操作：


css
**Important：不要忘记移除浮动，并添加填充：0；保证金：0；给你的UL。
（看小提琴）
Flexbox就可以了。我想你有垂直对齐：css中的底部，你可以试试
<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>

.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;
}

<div class="page-wrap">



</div>

<footer class="site-footer">
 <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="http://placehold.it/350x300">
</footer>


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  /*height: 142px; */
}
.site-footer {
  background: white;
}
 ul {
    /*float: left;*/
    text-align: right;
   display:inline-block;
 }

 ul li {
    padding-top: 5px;
 }

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

     img {
    width: 230px;
    height: auto;
    display:inline-block;
   vertical-align:bottom;
 }

ul, img { display:inline-block; vertical-align:bottom;}