CSS-div与父div的底部对齐(内联块)

最后发布: 2015-11-06 21:07:44


问题

我知道这个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;
}
html css css3 position alignment
回答

您可以使用vertical-align CSS属性指定希望元素垂直对齐的方式。

#info_box_right {
    vertical-align: top;
}

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