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

Question

当我尝试将 "vertical rule" 置于图像右侧时，图像粘在容器底部。

<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。设置：vertical-align:top 在你的 div 上

<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>
...

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

Why does my image stick to bottom of container?

html

css