如何将div与其父级的顶部对齐，同时保持其内联块行为？
如何将div与其父级的顶部对齐，同时保持其内联块行为？
提问于 2011-04-16 19:53:48
请参阅：http://jsfiddle.net/b2BpB/1/
问:如何使box1和box3与父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
回答 5
Stack Overflow用户
发布于 2011-04-16 19:56:49
尝试使用vertical-align CSS属性。
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
vertical-align: top; /* here */
}也可以将其应用于#box3。
Stack Overflow用户
发布于 2011-04-16 20:17:51
正如其他人所说，vertical-align: top是你的朋友。
作为额外的奖励，这里有一个额外的增强功能，使其可以在Internet Explorer 6和Internet Explorer 7中工作;)
示例：here
Stack Overflow用户
发布于 2011-04-16 21:04:56
您可以为每个框(box1、box2、box3)添加float: left；。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5686276
复制相关文章
相似问题