首页html如何左边图片右边文字

html如何左边图片右边文字

时间: 2024-10-17 15:14:34 浏览: 39

HTML中创建左侧图片右侧文字的效果通常通过结合`<img>`标签和段落文本`<p>`或者`<div>`元素来实现。这里是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 使用弹性布局 */ justify-content: space-between; /* 图片和文本间留空 */ } .image-container { width: 40%; /* 图片占据40%的空间 */ padding-right: 20px; /* 右侧添加些间距 */ } </style> </head> <body> <div class="container"> <div class="image-container"> <img src="your-image-url" alt="图片描述">  </div> <div> <p>这是右侧的文字描述。</p> </div> </div> </body> </html> ``` 在这个例子中，`.image-container`设置为弹性容器，并且设置了宽度和右侧的内边距。你可以将图片URL替换为实际的图片地址，将`<p>`标签内的文本替换成你需要的文字内容。

阅读全文