首页 文章

如何将div与其父级的顶部对齐但保持其内联块行为？

提问于
浏览 次
144

见：http://jsfiddle.net/b2BpB/1/

问：如何让box1和box3对齐父div boxContainer 的顶部？

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

非常感谢...

致谢：这个问题是从https://stackoverflow.com/users/20578/paul-d-waite先前给出的答案中得出的：Getting a CSS element to automatically resize to content width, and at the same time be centered

css html

5 回答

  • 332

    试试vertical-align CSS属性 .

    #box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

    也适用于 #box3 .

    回复于
  • 6

    正如其他人所说， vertical-align: top 是你的朋友 .

    作为奖励，这里是一个分叉的小提琴，增加了增强功能，使其在Internet Explorer 6和Internet Explorer 7中也可以使用;）

    示例：这里

    回复于
  • 20

    使用vertical-align：top;对于你想要在顶部的元素，正如我在你的jsfiddle上所展示的那样 .

    http://www.brunildo.org/test/inline-block.html

    回复于
  • 6

    你可以添加float：left;对于每个框（box1，box2，box3） .

    http://jsfiddle.net/Wa4ma/

    回复于
  • 0

    或者你可以只添加一些内容到div并使用inline-table

    回复于

相关问题