html - 如何使DIV垂直对齐顶部？

我无法让自己的DIV垂直对齐导航栏的顶部。我定义了这种样式...

#navbar {
    width: 100%;
    font-family: Arial;
    vertical-align: top;
}

这是我的导航栏后面的HTML……

<div id="navbar">
    <div id="leftNavSection">
    <img alt="Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png">
    </div>
    <div id="rightNavSection">
    Logged in as M. Bison
    <a href="/users/edit">Edit</a>
    <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
    </div>
</div>

但是，正如您从我的小提琴-https://jsfiddle.net/msynjppa/中看到的那样，右侧部分并未垂直对齐顶部。任何帮助表示赞赏，

最佳答案

当我看到您已经在float:right上使用rightNavSection时，我继续将float:left添加到您的leftNavSection中，从而解决了该问题。这是JSFiddle和CSS，这是我唯一更改的内容：

#navbar {
    width: 100%;
    font-family: Arial;
    vertical-align: top;
    background-color: red;
    display: inline-block;
}

#leftNavSection {
  float: left;
}

#rightNavSection {
   float:right;
}

如您所见，我还为display:inline-block的CSS添加了navbar以便使其正确显示。没有它，红色背景将不会显示。

关于html - 如何使DIV垂直对齐顶部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39271021/