h5怎么实现图片在左文字在右
时间: 2024-10-21 17:15:13 浏览: 52
H5中实现图片在左边、文字在右边的布局,通常可以使用HTML的`<figure>`和`<figcaption>`标签,或者结合CSS样式来完成。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.figure-container {
display: flex;
justify-content: space-between; /* 这里让左右元素对齐 */
}
.fig-left {
margin-right: 20px; /* 或者自定义间距 */
}
</style>
</head>
<body>
<div class="figure-container">
<img class="fig-left" src="your-image-url.jpg" alt="图片描述"> <!-- 替换为你的图片路径 -->
<div class="fig-right">这是右侧的文字描述。</div> <!-- 文字内容 -->
</div>
</body>
</html>
```
在这个例子中,`.figure-container` 容器设置了 `display: flex; justify-content: space-between;` ,这会使容器内的元素沿着主轴方向(默认为从左到右)均匀分布,图片和文本会分别占据左右两侧。
阅读全文