并排对齐文本和图像

Question

我似乎无法绕过这个简单的问题。我试图在图像旁边放置文本

我的HTML：

<article>
    <img src="http://placehold.it/300x150" />
    <h3>Long title should go right here</h3>
</article>

我的CSS：

img {
    display: inline-block;
}

h3 {
    display: inline-block;
    line-height: 20px;
}

这样可以，但是一旦标题中断并移动到下一行，整个h3标签就会移动到页面底部。我觉得这不是解决这个问题的正确方法。希望我能得到一些答案。

Answer 1

使用float代替：

img {
    float: left;
}

Answer 2

试试这个：

Live demo

<强> CSS

img {
    float:left;
    margin-right:5px;
}

h3 {
   line-height: 20px;
}