如何使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>

但是，正如您從我的小提琴（ https://jsfiddle.net/msynjppa/）中看到的那樣，右側部分並未垂直對齊頂部。 感謝您的幫助，

Answer 1

如果要並排兩個div ，則可以使用float或使用display: inline-block 。

在您的情況下，我定義了float: left; 為#leftNavSection

代碼段

 #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浮動，導致其自身崩潰，但被內聯元素阻止升至頂部。

消除適用於內聯元素而不是塊級元素（例如div的vertical-align:top原因。

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

如您所見，我還向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;
        }