[分享]css中将图片位于文字左边

在 CSS 中，将图片位于文字左边是一项非常常见的操作，它能够让页面更加丰富多彩，让布局更加丰富，使得页面的重点更加突出。下面是其中一种示例：代码如下： p { width: 500px; /定义段落...

在 CSS 中，将图片位于文字左边是一项非常常见的操作，它能够让页面更加丰富多彩，让布局更加丰富，使得页面的重点更加突出。下面是其中一种示例：
代码如下：

<style>
    p {
        width: 500px; /*定义段落的宽度*/
    }
    img {
        float: left; /*定义图片浮动到左边*/
        padding-right: 10px; /*定义图片与文字之间的间距为10px*/
    }
</style>

<p>
    <img src="picture.jpg" alt="picture">
    这里是一段文字，显示在图片的右侧，这里是一段文字，显示在图片的右侧。
</p> 

这里首先设置了一个 p 标签的宽度，为了避免文字太长排版紊乱。接着利用 float 属性将图片向左浮动，并添加了一些padding，创造出一些空间，使得图片与文字之间有一定的间距。
最后，我们将图片和文字都包含在一个 p 标签内，使得它们共计组成一个段落，而不是分别独立的元素。
以上便是 CSS 中将图片位于文字左边的一种示例，希望能对你的学习有所帮助。