html - html：将句子与图像对齐

Question

我正在开发一个非常简单的带有一些 css 样式的 html。我很难用段落来处理图像。假设我的 div 部分有一个图像和一个像这样的段落：

<div>
<img border="1" src="cake.jpg" width="100" height="70">
Tom's review: This is the best cake that I have ever had...
</div>

该段落出现在图像的“右下角”，但我希望它出现在图像的“右上角”。

我知道这个问题很简单，但我对 html 很陌生。这里有人可以帮忙吗？

谢谢。

Answer 1

您需要将图像向左浮动。

<div>
<img border="1" src="cake.jpg" width="100" height="70" style="float: left;">
Tom's review: This is the best cake that I have ever had...
<div style="clear: both;"></div>
</div>

Answer 2

使用此代码

<div>
    <div style="float: left;"><img border="1" src="gtld-lifecycle.jpg" width="100" height="70"></div>
<div style="float: left;">Tom's review: This is the best cake that I have ever had...</div>
</div>

Answer 3

如果您希望您的段落出现在顶部 - 将您的图像放在段落之后。

<div>
   <p>Tom's review: This is the best cake that I have ever had...</p>
   <img border="1" src="cake.jpg" width="100" height="70"/><br/>
</div>