如何让DIVs垂直对齐到顶部？
如何让DIVs垂直对齐到顶部？
提问于 2016-09-01 19:59:17
我无法让我的一个DIVs垂直对齐到将成为导航部分的顶部。我将此样式定义为…
#navbar {
width: 100%;
font-family: Arial;
vertical-align: top;
}这是我的导航栏…后面的超文本标记语言
<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/中看到的，右边的部分没有垂直对齐到顶部。任何帮助我们都会很感激，
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-09-01 20:05:16
因为我看到你已经在你的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以使其正常显示，如果没有它，红色背景就不会显示。
Stack Overflow用户
发布于 2016-09-01 20:02:29
如果你想要两个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>
Stack Overflow用户
发布于 2016-09-01 20:02:29
简单地让你的图像向左浮动。图像是一个内联元素，它占据了整个线条的宽度。您的div是浮动的，导致它自己折叠，但被inline元素阻止上升到顶部。
删除适用于内联元素的vertical-align:top原因，而不是块级别的原因，如div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39271021
复制相关文章
相似问题
腾讯云开发者
