如何在 CSS 中左对齐图像

在 CSS 中，要想左对齐图像，有几种方法可以选择。以下是其中的三种方法：

方法一：使用 float 属性

img {
  float: left;
  margin-right: 10px;
}

通过为图像设置浮动属性 float: left;，使其向左对齐。此外，可以为图像设置右边距（margin-right），以使文本不与图像贴在一起。

方法二：使用 display 属性

img {
  display: block;
  margin: 0 auto;
}

通过将图像的显示属性设置为 display: block;，使其成为块级元素并占据一行。然后，通过 margin: 0 auto; 设置图像的左右边距，使其在容器内水平居中。

方法三：使用 CSS 网格布局

.container {
  display: grid;
  grid-template-columns: auto 1fr;
}

img {
  grid-column: 1;
  grid-row: 1;
}

通过使用 CSS 网格布局，可以将图像放在左边的栏中。首先，将容器（.container）设置为网格布局，并在第一列设置自动宽度（auto），在第二列设置剩余的宽度（1fr）。然后，将图像的网格列属性（grid-column）设置为第一列（1），网格行属性（grid-row）设置为第一行（1）。

这个方法可能需要更多的 CSS 和 HTML 代码来实现，但也提供了更灵活的布局选项。

以上是三种在 CSS 中左对齐图像的方法。选择合适的方法，让您的网页达到最佳效果。

TODO: 总结一下