如何在图像周围环绕文本

看看任何网页，你会看到文本内容和图像的组合。 这两个要素都是网站成功的基本要素。 文本内容是网站访问者将要阅读的内容以及搜索引擎将用作其排名算法的一部分。 图像将增加网站的视觉兴趣，并有助于突出文字内容。

向网站添加文字和图片很简单。 文本添加了标准的HTML标签，如段落，标题和列表，而图像则放在具有元素的页面上。 但是，一旦将图像添加到网页中，您可能希望文本在图像旁边流动，而不是在图像下方对齐（这是添加到HTML代码的图像将在浏览器中呈现的默认方式）。 从技术上讲，通过使用CSS（推荐）或将可视指令直接添加到HTML中 （不建议，因为您希望保持网站样式和结构的分离），您可以通过两种方式实现此外观。

使用CSS

改变页面文本和图像布局以及浏览器中视觉样式的方式的正确方法是使用CSS 。 请记住，因为我们正在讨论页面上的视觉变化（使文本在图像周围流动），这意味着它是层叠样式表的域。

1. 首先，将您的图片添加到您的网页上。 请记住从该HTML中排除任何视觉特征（如宽度和高度值）。 这一点很重要，特别是对于图像大小因浏览器而异的响应式网站 。 某些软件（如Adobe Dreamweaver）会将宽度和高度信息添加到使用该工具插入的图像中，因此请务必从HTML代码中移除此信息！ 但是，请确保包含适当的替代文字 。 以下是HTML代码外观的一个例子：
   1. >
2. 为了造型的目的，你也可以添加一个类到图像。 这个类的值是我们将在我们的CSS文件中使用的。 请注意，我们在这里使用的值是任意的，但对于这种特定的样式，我们倾向于使用“左”或“右”值，具体取决于我们希望图像对齐的方式。 我们发现简单的语法可以很好地工作，对于其他未来可能需要管理站点的人来说也很容易理解，但是您可以为此提供任何您想要的类别值。
   2. 本身，这个类的价值不会做任何事情。 图像不会自动对齐到文本的左侧。 为此，我们现在需要转向我们的CSS文件。

1. 在您的样式表中，您现在可以添加以下样式：
   1. 。剩下 {
   2. 向左飘浮;
   3. padding：0 20px 20px 0;
   4. }
   5. 你在这里做的是使用CSS的“float”属性 ，它将从普通的文档流中拉出图像（图像通常显示的方式，文本在其下面对齐），并将它对齐到它的容器的左侧。 HTML标记中的文本现在环绕它。 我们还添加了一些填充值，以便该文本不会直接影响图像。 相反，它会有一些很好的空间，这在页面设计中会具有视觉吸引力。 在用于填充的CSS简写中，我们向图像的顶部和左侧添加了0个值，左侧和底部添加了20个像素。 请记住，您需要在左对齐图像的右侧添加一些填充。 右对齐的图像（我们稍后会看到）将在其左侧应用填充。
2. 如果您在浏览器中查看您的网页，现在应该看到您的图像与页面的左侧对齐，并且文本很好地包裹了它。 另一种说法是，图像是“漂浮在左边”。

1. 如果您想要将此图像更改为向右对齐（如本文附带的照片示例中所示），则会很简单。 首先，除了刚添加到我们的CSS中的“左”类值之外，还必须确保我们有一个用于右对齐的样式。 它看起来像这样：
   1. 。对 {
   2. float：right;
   3. padding：0 0 20px 20px;
   4. }
   5. 你可以看到，这与我们写的第一个CSS几乎相同。 唯一的区别是我们用于“float”属性的值以及我们使用的填充值（将一些添加到图像的左侧而不是右侧）。
2. 最后，您可以在HTML中将图像类的值从“左”改为“右”：
3. 现在在浏览器中查看你的页面，你的图片应该与文字整齐地包裹在一起。 我们倾向于在所有样式表中添加这两种样式，“左”和“右”，以便我们在创建网页时根据需要使用这些视觉样式。 这两种样式变得很好，可重复使用的功能，我们可以转向任何时候我们需要风格的图像文字环绕他们。

使用HTML而不是CSS（以及为什么你不应该这样做）

尽管可以使用HTML对图像进行换行文本，但Web标准规定CSS（以及上述步骤）是要走的路，以便我们可以保持结构（HTML）和样式（CSS）的分离。 当您考虑到某些设备和布局时，文本可能不需要在图像周围流动，这一点尤其重要。 对于较小的屏幕，响应式网站的布局可能会要求文本确实在图像下方对齐，并且图像拉伸了整个屏幕的宽度。 如果您的样式与HTML标记分开，则可以通过媒体查询轻松完成。 在今天的多设备世界中，对于不同的访问者和不同的屏幕，图像和文本的显示方式会有所不同，这种分离对于网页的长期成功和管理至关重要。