CSS-div對齊到父div的底部（內嵌塊）

Question

我知道這個html是馬虎，有一些額外的div是不必要的，但不管，我不明白爲什麼div與ID「info_box_right」是div對齊到父div的底部（您可以在下面的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

您可以指定希望一個元素垂直對齊使用垂直對齊CSS屬性。

#info_box_right { 
    vertical-align: top; 
} 

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