HTML文字在左,图片在右
时间: 2024-10-08 20:15:15 浏览: 30
html借助marquee实现文字左右滚动
HTML中将文字放置在左边,图片放在右边通常可以使用`<div>`元素配合一些基本布局属性来实现。你可以创建一个包含左右两个`<div>`的结构,然后分别给它们设定宽度和浮动样式:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: space-between; /* 图片和文字并排,文字靠左 */
}
.left-text {
width: 70%; /* 文字区域宽度,可根据需要调整 */
float: left;
}
.right-image {
width: 30%; /* 图片区域宽度,可根据需要调整 */
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left-text">
这里是左侧的文字内容...
</div>
<img src="image.jpg" alt="图片描述" class="right-image"> <!-- 插入图片标签 -->
</div>
</body>
</html>
```
在这个例子中,`.left-text`负责容纳文本,`.right-image`用于图片显示。通过设置`float:right`,图片会自动向右浮动到其容器的边缘。
阅读全文