我怎样才能让文本框粘在每个包装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; 
}