html - 如何让带有文本的框粘贴到每个 wrap 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;
}