html - 垂直对齐图像旁边的文本

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

默认情况下，文本左对齐，因此您不需要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>

2 回答 2