html - 为什么我的内联 block div 没有正确对齐？

Question

#inlineBLock1, #inlineBLock2{
    display:inline-block;
    width:200px;
    height:100px;
    border: 1px dashed #cccccc;
}

<div id="inlineBLock1">
    <img src="http://www.emec.org.uk/wp-content/uploads/2013/10/Aquamarine-Powers-Oyster-800-wave-energy-machine-in-operation-Image-Aquamarine-Power-300x199.jpg" width="50" height="50">
</div>
<div id="inlineBLock2">
    <p>Not aligned :(</p>
</div>

参见 http://jsfiddle.net/6FGHd/13/例如。

似乎将图像插入其中一个 div 会破坏对齐。

有什么想法吗？谢谢。

Answer 1

你的答案就在你的问题中。

为什么我的行内 block div 没有正确对齐？

您申请:

vertical-align: top;

Demo :)