为什么我的图像粘在容器的底部？

Question

当我尝试使用我的＆＃34;垂直规则＆＃34;在图像的右侧，图像粘在容器的底部。

<div>
    <div style="display:inline-block; width:210px;">
        <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
    </div>
    <div style="display:inline-block; width:12px;">
        <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
    </div>
</div>

如何在保持图像顶部的同时实现这一目标？

Answer 1

inline-block元素的默认定位为baseline。在你的div上设置：vertical-align:top

<div>
   <div style="display:inline-block;vertical-align:top; width:210px;">
      <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
   </div>
   <div style="display:inline-block;vertical-align:top; width:12px;">
      <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
   </div>
</div>

Answer 2

我建议使用浮动并排放置东西，但为了快速解决方案，只需将vertical-align:top添加到按钮div：

...
<div style="display:inline-block; width:210px; vertical-align: top;">
    <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
</div>
...