CSS

Question

我知道这个 html 很草率，有一些额外的 div 是不必要的，但无论如何，我不明白为什么 div ID "info_box_right" 与父 div 的底部对齐（您可以在下面的 jsfiddle 示例中看到 "text" 与底部对齐）。

有什么办法可以让它与父元素的顶部对齐吗？

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

CSS - div 对齐到父级 div 的底部（行内块）

CSS - div aligning to the bottom of parent div (inline-block)

html

position

alignment