如何实现文字居左图片居右布局并调整图片宽高尺寸

方法一：CSS浮动布局（传统方案） #

适合简单场景，代码简洁：

<div class="container">
  <p>这里是需要居左的文字内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <img src="你的图片路径" alt="图片描述" class="right-img">
</div>

<style>
.container {
  overflow: hidden; /* 清除浮动对父容器的影响 */
  max-width: 1200px; /* 可选，限制容器最大宽度 */
}
.right-img {
  float: right;
  width: 200px; /* 设置图片显示宽度 */
  height: auto; /* 自动按比例缩放高度，避免变形 */
  margin-left: 20px; /* 与文字保持间距 */
  margin-bottom: 10px;
}
p {
  text-align: left; /* 明确文字左对齐，默认值可省略 */
}
</style>

方法二：Flexbox布局（推荐方案） #

适配性更强，布局更灵活：

<div class="flex-container">
  <div class="text-wrap">
    <p>这里是需要居左的文字内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <img src="你的图片路径" alt="图片描述" class="flex-img">
</div>

<style>
.flex-container {
  display: flex;
  align-items: flex-start; /* 文字与图片顶部对齐 */
  gap: 20px; /* 文字与图片的间距 */
  max-width: 1200px;
}
.text-wrap {
  flex: 1; /* 文字区域占满剩余空间 */
}
.flex-img {
  width: 200px;
  height: auto;
}
p {
  text-align: left;
}
</style>

方法三：Grid布局（复杂场景适配） #

适合需要更精细网格控制的场景：

<div class="grid-container">
  <div class="text-wrap">
    <p>这里是需要居左的文字内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <img src="你的图片路径" alt="图片描述" class="grid-img">
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 文字占满剩余空间，图片自适应宽度 */
  gap: 20px;
  max-width: 1200px;
}
.grid-img {
  width: 200px;
  height: auto;
}
p {
  text-align: left;
}
</style>

额外提示：真正减小图片体积 #

调整显示尺寸只是视觉缩小，若要压缩图片文件体积，可做这些操作：

• 用TinyPNG等工具压缩图片文件
• 改用WebP格式（体积比JPG/PNG小约50%，兼容性良好）
• 按实际显示尺寸导出图片，不要用远大于需求的原图

内容的提问来源于stack exchange，提问作者ouahabb