Question

每个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>support@supportsupport.com.au</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;
}

谢谢

Answer 1

只需将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/

Answer 2

作为替代方案，您还可以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

Answer 3

只需向左浮动所有div并指定它们的宽度，但您需要为此清除div。如果要使用内联块，则无需指定宽度并清除左侧。在这种情况下，您可以vertical-align:top使用footer div

JsFiddle：Using float left JsFiddle：Using inline block

Answer 4

从#footer div中移除display：inline-block并使用#footer ul li {display：inline-block; float：left;}或者只是#footer ul li {display：inline-block;}在你的风格中

如何沿顶部水平对齐这些div？

4 个答案: