图片靠左对齐

一、设置图片对齐方式

1、在 CSS 中，通过设置属性 text-align 可以实现图片对齐方式的设置。

2、当我们在父元素中设置 text-align:left; 后，图片元素内的文字和行内元素就会向左对齐。具体代码如下：

<div style="text-align:left">
    <img src="example.jpg" alt="example" />
    <p>这是一段文字</p>
</div>

3、通过上述代码，我们将图片和段落包含在了一个 div 元素中并设置了 text-align:left;，使得图片和段落都向左对齐。

4、在实际开发中，为了避免图片和段落的上下文关系混乱，可以通过 margin-top 和 margin-bottom 进行一定的空隙设置。

二、使用 float 实现图片靠左对齐

1、在 CSS 中，通过设置属性 float:left; 可以实现图片靠左对齐。

2、在我们的代码中，可以将图片元素的 float 属性设置为 left，同时通过清除浮动（clear:both;）保证布局的一致性。具体代码如下：

<style type="text/css">
    img{
        float:left;
        margin-right:20px;
    }
    .clear{
        clear:both;
    }
</style>

<div>
    <img src="example.jpg" alt="example" />
    <p>这是一段文字</p>
    <div class="clear"></div>
</div>

3、通过上述代码，我们将图片元素的 float 属性设置为 left，同时为图片右侧设置了一定的 margin 值；通过一个名为 clear 的空 div 元素清除了浮动，避免布局异常。如此一来，图片靠左，文字则被环绕在其周围。

三、使用 flexbox 实现图片靠左对齐

1、在 CSS 中，我们也可以通过 flexbox 布局实现图片靠左对齐。

2、在我们的代码中，可以将图片和文字都包裹在一个 display:flex 容器中，并将图片元素的 flex 属性设置为 0 0 auto，同时为图片右侧设置了一定的 margin 值。具体代码如下：

<div style="display:flex">
    <img src="example.jpg" alt="example" style="flex:0 0 auto;margin-right:20px;" />
    <p style="flex:1 1 auto;">这是一段文字</p>
</div>

3、通过上述代码，我们将图片和文字元素包含在了一个 flexbox 容器中，使得两者协同工作来实现了优美的布局效果。不过请注意的是，flexbox 布局兼容性不太好，需要根据实际需求进行兼容性的处理。