垂直对齐图像旁边的文本

Question

我正在尝试从头开始构建博客，但我无法在图像顶部对齐文本。目前，文本位于图像的右侧，但是它居中。如何将文本与顶部对齐？

HTML

<img class="left" src="images/test.jpg" height="153" width="186" align="left">
<p class="right">bLAH BLAH BLAH</p>
<div style="clear: both"></div>

CSS

.left{
    display:inline-block;
    clear:left;
}

.right{
    display:inline-block;
    vertical-align: top;
    clear:right;
    }

Answer 1

尝试添加此内容并告诉我它是否有帮助：

.left {display:block;float:left;}

.right {float:left;margin-left:20px;}

Answer 2

默认情况下，文字与左侧对齐，因此您不需要align:left。另外，仅供参考text-align:left; 演示：http://jsfiddle.net/r2SWx/

<p  class="left"><img src="images/test.jpg" height="153" width="186"></p><p class="right">bLAH BLAH BLAH</p>
<div style="clear: both"></div>