需要代码在图像周围环绕文本吗？通常，当您创建HTML页面时，所有内容都是线性流动的，这意味着一个块接一个块。我以前的所有帖子都是一个例子，即文本，然后是图片，然后是文本等。
有时您可能希望在图像旁边而不是在其下方包含文本。这称为在图像周围环绕文本。使用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 src="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 src="IMAGE URL" align="right" /><p>Your text goes here.</p>
就是这样！很(Pretty)容易吧？您唯一需要使用CSS的情况是，如果您想为图片添加边距，以便在文本和图像之间留出一些空间。
您可以使用以下CSS样式代码为图片添加边距：
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
上面的代码使用MARGIN CSS元素在图像右侧添加 10 像素的空白。由于我们已将图像左对齐，因此我们希望将空白添加到右侧。
基本上，这四个数字代表TOP RIGHT BOTTOM LEFT。因此，如果您想将空白添加到右对齐图像，您可以这样做：
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
因此，使用HTML来执行此任务相当简单，但再一次，它可能不适用于响应式网站。
使用 CSS 将文本环绕在图像周围
在图像周围环绕文本的更好方法是使用CSS。它可以让您对元素的定位进行更精细的控制，并且可以更好地与现代编码标准配合使用。
<img src="IMAGE URL" alt="A photo" class="left" />
即使我在HTML示例中将(HTML)CSS直接包含到图像标签中，您也真的不应该再这样做了。相反，您应该有一个名为样式表的单独文件，其中包含所有CSS代码。
在IMG标记中，您只需为标记分配一个类并为其命名。在我的示例中，我将类命名为left。在我的样式表中，我所要做的就是添加以下代码：
.left {
float: left;
padding: 0 10px 0 0;}
如您所见，我在左对齐图像的右侧添加了 10px 的填充。我还使用 float 属性将图像移出文档的正常流程，并将其放在父容器的左侧。
如您所见，它比将所有代码添加到IMG标记本身要干净得多。它也更易于管理，您可以使用更多CSS属性来自定义网页的外观。如果您有任何问题，请随时发表评论。享受！
HTML Code to Wrap Text Around Image
Need the code to wraр text around an image? Normally when yоu creatе an HTML page, everything flows linearly, meaning one block directly after another. All of my previous рosts are an examplе of this, i.e. text, then picture, then text, etc.
Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.
However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.
Wrap Text Around Image using 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.
In order to have the text wrap along the right side of the image, you have to align the picture to the left:
<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>
If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “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 src="IMAGE URL" align="right" /><p>Your text goes here.</p>
That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.
You can add margins to a picture by using the following CSS styling code:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.
Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.
Wrap Text Around Image using CSS
The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.
<img src="IMAGE URL" alt="A photo" class="left" />
Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.
In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:
.left {
float: left;
padding: 0 10px 0 0;}
As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.
As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!
