如何让我的 DIV 垂直对齐到顶部？

Question

我无法让我的一个 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>

但是正如您从我的 Fiddle — https://jsfiddle.net/msynjppa/ 中看到的那样，右侧部分没有垂直对齐到顶部。感谢您的帮助，

Answer 1

如果你想并排放置两个 div，那么要么使用 float，要么使用 display: inline-block。

在你的例子中，我已经为 #leftNavSection

定义了 float: left;

代码片段

#navbar {
  width: 100%;
  font-family: Arial;
  vertical-align: top;
  background-color: red;
}
#leftNavSection {
  float: left;
}
#rightNavSection {
  float: right;
}
#navbar::after,
#navbar::before {
  content: "";
  display: table;
}
#navbar::after {
  clear: both;
}

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

Answer 2

简单地将您的图片向左浮动。图像是一个内联元素，占据了整个线条的宽度。您的 div 是浮动的，导致它自行折叠，但被内联元素阻止上升到顶部。

删除适用于内联元素的 vertical-align:top 原因，而不是块级元素，例如 div.

Answer 3

正如我看到您已经在 rightNavSection 上使用 float:right，我继续将 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;
}

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

Answer 4

我建议使用 flex-box，因为这是最简单的方法。

#navbar {
  width: 100%;
  font-family: Arial;
  background-color: red;
  display: flex;
  justify-content: space-between;
}

#leftNavSection,
#rightNavSection {
  background-color: yellow;
}

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

Answer 5

你也可以用这个

#leftNavSection,
#rightNavSection
        {
            display: inline-block;
        }

如何让我的 DIV 垂直对齐到顶部？

How do I get my DIVs to vertically align to the top?

html

css

vertical-alignment

代码片段