首页web图片在左文字在右的代码

web图片在左文字在右的代码

时间: 2024-10-06 20:01:49 浏览: 35

在HTML中创建一个图片位于左边、文字在右边布局的常见做法是使用`<div>`元素结合CSS的`float`属性。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; justify-content: space-between; /* 文字靠右 */ align-items: center; /* 图片和文字垂直居中 */ } img { width: 200px; /* 图片宽度，可以根据需要调整 */ margin-right: 20px; /* 为文字留出空间 */ } </style> </head> <body> <div class="container"> <img src="your-image-url.jpg" alt="图片描述">  <p>这是右侧的文字内容。</p> </div> </body> </html> ``` 在这个例子中，`.container`的`justify-content`属性设置为`space-between`，使得内联项目（如文本）均匀分布在剩余的空间里，图片则自然地放在了左侧。记得替换`src="your-image-url.jpg"`为你实际的图片URL。

阅读全文