如何將這些div沿頂部水平對齊？

每個div包含不同長度的列表，因爲我使用的是內嵌塊。我認爲這是導致它沿着最高處的div的底部對齊。如何將這些div沿頂部水平對齊？

有沒有一種方法，我可以調整這些div沿着頂部或者我需要給每個div獨特的id和style它們各自相應的？

我在這裏做一個小提琴： http://jsfiddle.net/Bezzzo/dcqmh2g2/1/

HTML

<!-- footer --> 
<div id="footer" > 

    <!--Community div--> 
    <div> 
     <h3>Community</h3> 
     <ul> 
      <li>Facebook</li> 
      <li>Twitter</li> 
      <li>Tumbler</li> 
      <li>Google plus</li> 
     </ul> 
    </div> 

    <!--Contact support div--> 
    <div> 
     <h3>Contact support</h3> 
     <ul> 
      <li>[email protected]</li> 
     </ul> 
    </div> 

    <!--Legal div--> 
    <div> 
     <h3>Legal</h3> 
     <ul> 
      <li>Terms and conditions</li> 
      <li>Refund policy</li> 
      <li>Privacy Policy</li> 
     </ul> 
    </div> 
</div>

CSS

#footer { 
    position: relative; 
    width:1033px; 
    height: 160px; 
    margin:auto; 
    border-style:dashed; 
} 

#footer div { 
    display:inline-block; 
    position: relative; 
    margin-left: 150px; 
    border-style:dashed; 
} 

#footer ul { 
    list-style-type: none; 
    padding:0px; 
    margin:0px; 
    left:0px; 
    right:0px; 
}

謝謝

來源

2015-07-10 user3796133

只需添加vertical-align: top;您#footer div：

#footer div { 
    border-style: dashed; 
    display: inline-block; 
    margin-left: 150px; 
    position: relative; 
    vertical-align: top; 
}

的jsfiddle：http://jsfiddle.net/ghorg12110/dcqmh2g2/3/

來源

2015-07-10 09:59:16

完美！我發誓我試過了，也許我把它放在了錯誤的元素中。謝謝 – user3796133

@ user3796133請點擊正確答案旁邊的勾號將問題標記爲已解決。謝謝。 –

我會的，雖然有一個時間限制，我可以接受你的答案，仍然2分鐘等待「耐心，你必須有我的年輕padawan」:-) – user3796133

作爲替代你也可以display: table; - 如果你想利用垂直對齊的真正有用的。它可能不是最適合你目前的情況，但它有它的優點。

#footer { 
    position: relative; 
    width:1033px; 
    height: 160px; 
    margin:auto; 
    border-style:dashed; 
    /* added */ 
    display: table; 
    /* -- */ 
} 

#footer div { 
    /* added */ 
    display: table-cell; 
    vertical-align: top; 
    /* -- */ 
    position: relative; 
    border-style:dashed; 
}

Working example

來源

2015-07-10 10:05:38 Doidgey

靜靜地飄浮離開所有div和指定它們的寬度，但你需要清除DIV這一點。如果你想使用內聯塊，那麼你不需要指定寬度並清除左邊。在這種情況下可以使用vertical-align:top到footer div

的jsfiddle：Using float left 的jsfiddle：Using inline block

來源

2015-07-10 10:13:56 user254153

刪除顯示：從#footer的DIV和使用#footer的UL李{顯示內聯塊：內聯塊;浮動：左;}或者只是#footer ul li {display：inline-block;}在你的風格

來源

2015-07-10 10:15:56 Yogendra