html - 文本对齐问题

Question

我在使用 text-align = top; 时遇到一些问题在我的 CSS 中。我想要的是让段落元素在图像的顶部和右侧对齐。它在第一行上运行良好，但第二行仍然在我的图像下方。我也尝试过水平对齐；但这对我没有用。

我看的W3C页面如下:http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

CSS代码如下:

img.top {
    vertical-align: text-top;
}

这是 HTML 的一部分，我正试图对其进行操作。

<p>
<img class = top src="../images/myImage.gif" alt="A curious stack question"/>
    Many questions <br/>
    Are most certainly to come
</p>

我怀疑部分问题是 <br/>因为没有它，文本确实会对齐到顶部；但我确实需要 <br/>在该位置进行格式化。我正在考虑使用 <pre> ;但我不确定这是否是最好的解决方案。

Answer 1

您与该结构的关系如何？你可以这样做:

HTML:

<img class="top" src="..img/img.jpg"/>
<p>
    Many questions <br/>
    Are most certainly to come
</p>
<div class="clear"></div>

CSS:

img.top {
  float: left;
}

.clear {
  clear: both;
}

fiddle : https://jsfiddle.net/6pwry2nn/