div css图文混排

基础概念

div 是 HTML 中的一个块级元素，用于布局和分组其他 HTML 元素。CSS（层叠样式表）用于设置 HTML 元素的样式和布局。图文混排是指在一个 div 容器中同时包含文本和图片，并通过 CSS 进行布局和样式设置。

类型

文本环绕图片：文本围绕图片排列。
图片浮动：通过 CSS 的 float 属性使图片浮动在文本旁边。
网格布局：使用 CSS Grid 或 Flexbox 实现更复杂的图文混排布局。

应用场景

新闻网站：文章中包含图片和文字。
产品展示：产品介绍页面中包含产品图片和详细描述。
社交媒体：用户发布的内容中包含图片和文字。

示例代码

以下是一个简单的示例，展示如何使用 CSS 实现文本环绕图片的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排示例</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
        img {
            float: left;
            margin-right: 10px;
            width: 200px;
            height: 200px;
        }
        p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/200" alt="示例图片">
        <p>这是一个图文混排的示例。通过 CSS 可以轻松实现文本环绕图片的效果。这种布局方式在新闻网站、产品展示和社交媒体中非常常见。CSS 提供了丰富的样式和布局选项，使得图文混排既美观又实用。</p>
    </div>
</body>
</html>