如何将这些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