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>

但是你可以从我的小提琴 - https://jsfiddle.net/msynjppa/看到，右边的部分没有垂直对齐顶部。任何帮助表示赞赏，

Answer 1

如果您想要并排两个div，请使用float或使用display: inline-block。

在您的情况下，我为float: left;

定义了#leftNavSection

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

简单地将图像浮动。图像是一个内联元素，占据了整个线条的宽度。你的div浮动导致它崩溃到自身但被内联元素阻止从上升到顶部。

删除适用于内联元素的vertical-align:top原因，而不是div等阻止级别的原因。

Answer 3

正如我所看到您已经在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，以便正确显示。没有它，红色背景将无法显示。

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垂直对齐到顶部？

5 个答案:

代码段