如何将页面中的图片移动到左侧位置？

我的HTML代码示例 #

This is my HTML sample code

页面效果截图 #

我查过MDN文档也用谷歌搜过，但作为新手还是不知道怎么把图片移到页面左侧。

解决方案 #

要把图片移到页面左侧，有几种简单实用的方法：

• CSS浮动法：给图片直接加行内样式，还能通过margin避免文本紧贴图片

  <img src="你的图片地址" alt="图片描述" style="float: left; margin-right: 15px;" />
  

  要是后续内容不想环绕图片，给对应元素加clear: both样式即可。

• Flex布局法：把图片和其他内容放在一个Flex容器里，默认就会靠左排列

  <div style="display: flex; align-items: flex-start;">
    <img src="你的图片地址" alt="图片描述" />
    <!-- 右侧要展示的文本或其他内容 -->
  </div>
  

• Grid布局法：适合更复杂的页面结构，指定列宽后图片会自动占左侧区域

  <div style="display: grid; grid-template-columns: 200px 1fr; gap: 15px;">
    <img src="你的图片地址" alt="图片描述" />
    <!-- 右侧内容 -->
  </div>
  

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