使用CSS将图像对齐到网页布局的左侧
现在看几乎任何网页，你会看到组成这些页面大部分的文本和图像。 将文本和图像添加到页面非常容易。 文本使用标准HTML标记（如段落，列表和标题）进行编码，而使用元素包含图像。
使文本和图像一起工作的能力是使伟大的网页设计师脱颖而出的原因！ 你不仅希望你的文本和图像一个接一个地出现，这是默认情况下这些块级元素的布局方式。 不，您想要对文字和图片如何在最终成为您网站的视觉设计的流程中进行一些控制。
让页面左侧的图像与页面的左侧对齐，这对于印刷设计和网页都是一种常见的设计处理。 在网络术语中， 这种效果被称为浮动图像 。 这种风格是通过“float”的CSS属性实现的。 此属性允许文本在左侧对齐图像的右侧流动。 （或者在其左侧右侧对齐的图像周围）。让我们来看看如何实现这种视觉效果。
从HTML开始
你需要做的第一件事就是使用一些HTML。 对于我们的示例，我们将编写一段文字，并在段落的开头（在文本之前，但在开始的
标签之后）添加图像。 这是HTML标记的样子：
默认情况下，我们的网页将显示文字上方的图片。 这是因为图像是HTML中的块级元素。 这意味着浏览器默认在图像元素前后显示换行符。 我们将通过转向CSS来改变这个默认外观。 然而，首先，我们将为我们的图像元素添加一个类值 。 该类将作为我们稍后在CSS中使用的“钩子”。
请注意，这类“左”没有任何作用！ 为了达到我们想要的风格，我们需要接下来使用CSS 。
CSS样式
通过使用我们的HTML，包括我们的“左”类属性，我们现在可以转向CSS。 我们会在我们的样式表中添加一条规则来浮动该图像，并在其旁边添加一些填充，以便最终环绕图像的文本不会与其紧密贴合。 这里是你可能写的CSS：
.left {float：left; padding：0 20px 20px 0; }此样式将该图像浮动到左侧，并在图像的右侧和底部添加一些填充 （使用一些CSS速记）。
如果您在浏览器中查看了包含此HTML的页面，图像现在将对齐到左侧，并且段落的文本将显示在其右侧，两者之间具有适当的间距。 请注意，我们使用的“左”的类值是任意的。 我们可以称它为任何东西，因为“左”这个词本身就没有任何作用。 这需要在HTML中有一个类属性，它与实际的CSS样式一起工作，该样式指示您正在寻找的视觉变化。
实现这些风格的替代方法
这种给图像元素一个类属性，然后使用浮动该元素的通用CSS样式的方法只是一种可以实现这种“左对齐图像”外观的方法。 你也可以通过编写一个更具体的选择器来将图像的类值从图像中取出并使用CSS进行设置。 例如，我们来看一个示例，其中该图像位于具有“main-content”类值的分区内。
要设置这个图像的样式，你可以写这个CSS：
.main-content img {float：left; padding：0 20px 20px 0; }在这个场景中，我们的图像将与左侧对齐，文本像以前一样浮动，但我们不需要为标记添加额外的类值。 按比例进行此操作可以帮助创建更小的HTML文件，这将更易于管理，并且还可以帮助提高性能。
最后，您甚至可以直接将样式添加到HTML标记中，如下所示：
这种方法被称为“ 内联样式 ”。 这是不可取的，因为它清楚地将元素的风格与其结构标记相结合。 Web最佳实践规定页面的样式和结构应保持独立。 当您的网页需要更改其布局并通过响应式网站查找不同的屏幕尺寸和设备时，这非常有用。 将页面样式交织在HTML中会使创建媒体查询变得更加困难，这些查询将根据不同屏幕的需要调整网站的外观。
Jennifer Krynin的原创文章。 由Jeremy Girard于4/3/17编辑。