CSS-div與父div的底部對齊（內聯塊）

Question

我知道這個html很草率，不需要一些額外的div，但是無論如何，我不明白為什么ID為“ info_box_right”的div會與父div的底部對齊（您可以看到“ text”與下面的jsfiddle示例的底部）。

有什么想法可以使它與父級的頂部對齊嗎？

http://jsfiddle.net/taddme0y/1/

HTML：

<div id="info_container" >
    <div id="info_box">
        <hr class="info_box_hr" noshade>
            <a id="info_box_title"></a>
        <hr class="info_box_hr" noshade>
        <div id="info_box_wrapper">
            <div id="info_box_left">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_logo">
                        <img class="info_img" id="info_img_logo" alt="logo">
                    </a>
                    <a id="info_box_screenshot">
                        <img class="info_img" id="info_img_screenshot" alt="screenshot">
                    </a>
                </div>
            </div>
            <div id="info_box_right">
                <div class="info_box_sub_wrapper">
                    <a id="info_box_right_text">
                        Text
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

#info_container {
    z-index: 500;
    position: relative;
    top: 0;
    left: 0;
    width: 80%;
    height: 0;
    margin: 0 auto;
    background-color: #000000;
}
#info_box {
    z-index: 500;
    position: relative;
    top: 50px;
    width: 100%;
    background-color: #FFFFFF;
    text-align: center;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#info_box_left {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 45%;
    min-width: 100px;
}
#info_box_right {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 45%;
    min-width: 100px;
    /* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#info_box_right_text {
    position: relative;
    color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-style: transparent;
    border-color: #4D4D4D;
    border-width: 2px;
    cursor: pointer;
}
.info_img {
    width: 100px;
    margin: 20px;
    background-color: #000;
}

Answer 1

您可以使用vertical-align CSS屬性指定希望元素垂直對齊的方式。

#info_box_right {
    vertical-align: top;
}

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp