html - テキストを含むボックスを各ラップ 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;
}