码多多AI编程问答网

使用CSS实现文字环绕图片的效果，可以通过flex布局或grid布局来实现。以下是一个示例代码：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Wrapping Around Image</title>
<style>
    .container {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 20px;
        align-items: start;
    }

    .image {
        max-width: 100%;
        height: auto;
    }
</style>
</head>
<body>
<div class="container">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac justo nec nunc convallis tincidunt non a turpis. Phasellus tristique mi vel ante eleifend, eu tincidunt purus malesuada. Maecenas vehicula metus eget magna pharetra, sed consequat urna ullamcorper. Vivamus ultricies nunc et tortor tristique, in feugiat est cursus. Nullam tincidunt metus sit amet mi laoreet, ac tempus felis aliquet.</p>
    </div>
    <img src="example.jpg" alt="Example Image" class="image">
</div>
</body>
</html>

在这个示例中，我们使用grid布局将文本和图片放置在同一行，使文本环绕图片。样式中设置了网格布局的列模板，使左侧文本占据第一列，右侧图片占据第二列。通过调整网格布局的gap和align-items属性，可以进一步调整文本和图片之间的间距和对齐方式。

文字在左边。图片在右边，左边的文字环绕右边的图片。不用float属性，怎么用CSS实现

文字在左边。图片在右边，左边的文字环绕右边的图片。不用float属性，怎么用CSS实现