Html 将图像定位在与导航对齐的底部

我想将此站点图像左侧的导航栏（）与底部（边框上方）对齐

我怎样才能做到这一点

我目前的HTML是：

<header class="site-header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    <h5><?php bloginfo('description'); ?></h5>

    <img class="pull-right" src="<?php bloginfo('template_directory'); ?>/images/skins.png">

    <nav class="site-nav">
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
</header><!-- /site-header -->

---

您可以尝试在包含

div

和

ul

元素上使用相对和绝对定位

CSS应该是这样的：

.menu-menue-container {
  position: relative;
  height: 200px;
}

.menu-menue-container ul {
  position: absolute;
  bottom: 0;
}

---

这不是最好的方法，但它会帮你完成工作。

只需将保存菜单项的UL元素的高度缩短为LI高度，并添加页边距顶部以匹配图像高度即可。 我已经玩了一点，这应该足够近了（你可以尝试向上或向下添加几个像素）：

---

实际上，stackoverflow上的一切，但有些事情我不明白。你知道一个解决方案吗？你提供的链接在图像的左边有一个导航菜单。我不确定你到底想要什么，但在设计领域，细节是相当重要的，特别是当你似乎已经得到了你想要的结果。

.menu-menue-container {
  position: relative;
  height: 200px;
}

.menu-menue-container ul {
  position: absolute;
  bottom: 0;
}

ul{
  height: 40px; // instead of 200px
  margin-top: 180px;
  // rest of old style
}