如何将div对齐到父对象的顶部，但保持其行内阻塞行为？ [英] How to align a div to the top of its parent but keeping its inline-block behaviour?

问题描述

请参阅： http://jsfiddle.net/b2BpB/1/

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

Q: How can you make box1 and box3 align to the top of the parent 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;

帮助非常感谢...

致谢：此问题是由先前由 http://stackoverflow.com/users/20578/paul- d-waite ：获取CSS元素自动调整为内容宽度，并同时居中

Acknowledgement: This question is forked from an answer previously given by http://stackoverflow.com/users/20578/paul-d-waite : Getting a CSS element to automatically resize to content width, and at the same time be centered

推荐答案

尝试 vertical-align CSS属性。

Try the vertical-align CSS property.

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

应用于＃box3 。

这篇关于如何将div对齐到父对象的顶部，但保持其行内阻塞行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！