不使用css怎么在html5中在图片的右边加文字?
时间: 2024-09-15 21:12:45 浏览: 82
微信小程序图片右边加两行文字的代码
在HTML5中,如果你不想使用CSS来直接定位图片和文字,你可以利用`<div>`元素和绝对定位来达到效果。首先,创建一个包含图片的`<img>`标签和一个包含文字的`<p>`或`<span>`标签,然后将这两个元素放在一个`<div>`中,并设置其`position`属性为`relative`。接着,你可以为文字设置`position: absolute; right: 0; bottom: 0;`使其位于图片的右侧。
示例代码如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图文并排</title>
</head>
<body>
<div style="position: relative;">
<img src="your-image-url.jpg" alt="你的图片描述">
<p style="position: absolute; top: 0; right: 0; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 5px;">这是右侧的文字内容</p>
</div>
</body>
</html>
```
在这个例子中,文字会显示在图片的右侧,因为设置了`right: 0`让它紧贴图片右侧边缘。注意要调整`top`值,以保证文字不会遮盖图片。
阅读全文