需要代码在图像周围包装文字吗？通常，当您创建HTML页面时，所有内容都会线性流动，这意味着一个块直接在另一个块之后。我以前的所有帖子都是这样的一个例子，即文本，然后是图片，然后是文本等。
有时你可能想要在图像旁边而不是在图像下面包含文本。这称为在图像周围包裹文本。使用HTML包装文本实际上相当容易。请注意，您不必使用CSS来包装文本。
但是，现在W3C建议使用CSS而不是HTML对于这些任务。我将在下面提到这两种方法，但如果可以的话，最好使用CSS，因为它更适合响应式网站设计。
使用HTML环绕图像文本
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Fusce dictum gravida enim，quis ultricies mauris posuere quis。 Duis adipiscing tincidunt sagittis。 Cum sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Aliquam a felis vitae augue lobortis dictum。 Curabitur molestie posuere laoreet。 Ut pellentesque nunc in lorem egestas non imperdiet enim congue。
为了让文字环绕图像的右侧，你必须将图片对齐到左边：
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
如果您希望文本显示在左侧，图像显示在最右侧，只需将align参数更改为“right”。
Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Fusce dictum gravida enim，quis ultricies mauris posuere quis。 Duis adipiscing tincidunt sagittis。 Cum sociis natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Aliquam a felis vitae augue lobortis dictum。 Curabitur molestie posuere laoreet。 Ut pellentesque nunc in lorem egestas non imperdiet enim congue。
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
就是这样！很简单吧？你想要使用CSS的唯一时间是你想要为图片添加边距，以便在文本和图像之间留出一些空间。
你可以使用以下方法为图片添加边距。以下CSS样式代码：
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
上面的代码使用MARGIN CSS元素在图像的右侧添加10个像素的空白。由于我们已将图像对齐，我们希望在右侧添加空白。
基本上，四个数字代表TOP RIGHT BOTTOM LEFT。因此，如果要将空白空间添加到右对齐图像，您可以这样做：
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
因此使用HTML执行此任务相当简单，但是一次再次，它可能不适用于响应式网站。
使用CSS环绕图像文本
在图像周围环绕文本的更好方法是使用CSS。它可以让你对元素的定位进行更精细的控制，并且可以更好地适应现代编码标准。
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
即使我将CSS直接包含在HTML示例中的图像标记中，你真的不应该再这样做了。相反，您应该有一个名为样式表的单独文件，其中包含所有CSS代码。
在IMG标记中，您只需为标记指定一个类并为其指定名称。在我的示例中，我将类命名为左。在我的样式表中，我所要做的就是添加以下代码：
.left {
float: left;
padding: 0 10px 0 0;}
如您所见，我在左对齐图像的右侧添加了10px的填充。我还使用float属性将图像移出文档的正常流程并将其放在父容器的左侧。
正如您所看到的，它比添加所有代码要清晰得多到IMG标签本身。它也更易于管理，您可以使用更多CSS属性来自定义网页上的外观。如果您有任何疑问，请随时发表评论。享受！