javascript - 如何将一个元素放到一个分区的底部？

Question

我有一个包含 Logo 和导航菜单的标题 div 假设我在左侧有一个 Logo 100x50 和一个应该 float: right

的导航菜单

如何让导航菜单对齐到标题 div 底部的正上方？ 如果 Logo 大小发生变化，会发生什么情况，是否可以在不必调整 nav 元素的 margin-top 的情况下根据 Logo 大小来完成？ HTML

<div class="container">
    <header class="site-header">
        <div class="site-logo">
        </div><!-- /site-logo -->

        <nav class="site-nav">
        </nav>
    </header>
</div>

CSS

.site-header nav ul {
  float: right;
  border: 1px solid green;
}

div.site-logo {
  float: left;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}

P.S.:如果不用javascript也能搞定就好了

Answer 1

我会给你一个 flexbox 的例子。这比使用绝对位置要容易得多，而且您不必担心 Logo 的大小。

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 500px;
  height: 50px;
  border: 1px solid #000;
}

div.site-logo {
  width: 100px;
  height: 50px;
  background-color: #00f;
}

div.site-nav {
  width: 300px;
  height: 25px;
  background-color: #f00;
  z-index: 1;
}

<div class="container">
    <header class="site-header">
        <div class="site-logo"></div><!-- /site-logo -->

        <div class="site-nav"></div>
    </header>
</div>

如果您使用 flex，您可能需要添加其他浏览器的属性名称。