首页css html 设置文字在左面图片在右面

css html 设置文字在左面图片在右面

时间: 2024-10-25 15:10:39 浏览: 39

要在HTML和CSS中实现文字在左边、图片在右边的布局，通常可以使用`<div>`标签包裹内容，并设置其样式。你可以使用Flexbox或者Grid布局，它们都非常适合创建灵活的布局。以下是使用Flexbox的一个简单例子： HTML: ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="content-container"> <img src="your-image.jpg" alt="图片描述" class="image"> <p>这是左侧的文字</p> </div> </body> </html> ``` CSS (styles.css): ```css .content-container { display: flex; /* 使用Flexbox布局 */ justify-content: space-between; /* 左边文字靠左，右边图片靠右 */ align-items: center; /* 图片和文字都居中对齐 */ width: 100%; /* 确保容器宽度 */ } .image { max-width: 50%; /* 控制图片最大宽度 */ margin-right: 20px; /* 文字与图片之间的间隔 */ } ``` 如果需要将文字放在图片的上部和下部，可以进一步调整`.content-container`的`align-items`样式。

阅读全文