我怎樣才能讓文本框粘在每個包裝div的頂部？

Question

我無法弄清楚沒有使用float：right或使用相對定位。如果我使用它，當人們放大和縮小時它會四處移動。我試圖弄清楚如何讓它保持在我放置它的位置，即使人們放大和縮小。

http://htmlcss.netii.net/

HTML結構：

<div class="staff-block">   
    <img class="staff-pics" /> 

    <div class="staff-text"> 
     <h3> 
     <p> 
    </div> 
</div> 

CSS：

.staff-block { /* Red */ 
    border: 1px dashed red; 
    display: block; 

} 

.staff-pics { /* Orange */ 
    border: 1px dashed orange; 
    display: ; 
    width:150px; 
    display: inline-block; 
    margin-bottom: 50px; 
} 

.staff-text { /* Yellow */ 
    border: 1px dashed yellow; 
    width: 70%; 
    font-size: 15px; 
    color: #FFCC00; 
    display: inline-block; 
} 

.staff-text h3 { /* Green */ 
    border: 1px dashed lime; 
    margin-bottom: 10px; 
    color: white; 
} 

.staff-text p { /* Blue */ 
    border: 1px dashed aqua; 
} 

Answer 1

因爲它們已經inline-block元素，只需添加vertical-align:top。

.staff-text { 
    vertical-align: top; 
} 

它的工作原理 - 我通過Chrome的開發工具..測試它

更新CSS：

.staff-text { 
    border: 1px dashed lime; 
    width: 70%; 
    font-size: 15px; 
    color: #FFCC00; 
    display: inline-block; 
    vertical-align: top; 
}