html图文混排实例
时间: 2024-09-12 07:03:41 浏览: 23
HTML中的图文混排通常是通过结合`<p>`标签(用于段落文本)和`<img>`标签(用于插入图片)来实现的。下面是一个简单的实例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图文混排示例</title>
<style>
.container {
display: flex; /* 使用Flex布局 */
justify-content: space-between; /* 图片和文字对齐方式 */
}
img {
max-width: 100%; /* 自适应宽度 */
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="图片描述"> <!-- 替换为实际图片路径 -->
<p>这是关于这张图片的一些文字说明。</p>
</div>
</body>
</html>
```
在这个例子中,`.container`容器使用了 Flexbox 布局,使得图片和文字可以在一行上并列显示,并且图片会在文字的两侧留有一定的间距。你可以将`<img>`标签内的`src`属性替换为你需要展示的实际图片URL,同时修改`alt`属性提供图片的描述。