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

Question

当我尝试将“垂直规则”置于图像右侧时，图像会粘在容器底部。

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