Html 如何将 div 与其父级的顶部对齐但保持其内联块行为？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5686276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align a div to the top of its parent but keeping its inline-block behaviour?
提问by tur130
See: http://jsfiddle.net/b2BpB/1/
见：http: //jsfiddle.net/b2BpB/1/
Q: How can you make box1 and box3 align to the top of the parent div boxContainer?
问：如何让 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;
}
Help much appreciated...
非常感谢帮助...
Acknowledgement: This question is forked from an answer previously given by 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
致谢：这个问题是从https://stackoverflow.com/users/20578/paul-d-waite先前给出的答案分叉出来的 ：让一个 CSS 元素自动调整到内容宽度，同时居中
回答by rhino
Try the vertical-alignCSS property.
试试vertical-alignCSS 属性。
#box1 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
vertical-align: top; /* here */
}
Apply it to #box3too.
也适用于#box3。
回答by clairesuzy
As others have said, vertical-align: topis your friend.
正如其他人所说，vertical-align: top是你的朋友。
As a bonus here is a forked fiddle with added enhancements that make it work in Internet Explorer 6 and Internet Explorer 7 too ;)
作为奖励，这里有一个分叉的小提琴，增加了增强功能，使其也可以在 Internet Explorer 6 和 Internet Explorer 7 中运行；)
Example: here
例子：这里
回答by ninjagecko
Use vertical-align:top; for the element you want at the top, as I have demonstrated on your jsfiddle.
使用垂直对齐：顶部；对于顶部想要的元素，正如我在 jsfiddle 中演示的那样。
回答by Alex Emilov
You can add float: left; for each of the boxes (box1, box2, box3).
您可以添加 float: left; 对于每个框（box1、box2、box3）。
回答by Robert Went
Or you could just add some content to the div and use inline-table
或者您可以向 div 添加一些内容并使用 inline-table
