HTML中如何将<img>精准置于另一<img>下方？左右布局问题求助

我来帮你搞定这个布局难题～你遇到的情况是因为默认文档流里元素会自动换行，当第二张图片高度过大时，就会被挤到表格下方。这里给你两个简单靠谱的解决方案：

方案一：使用CSS Grid布局 #

Grid是实现这种左右布局最直观的方式，直接把页面划分为左右两列，让左侧图片容器和右侧表格始终处于同一行：

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <!-- 左侧图片容器 -->
  <div>
    <img src="你的第一张图片地址" alt="图片1" style="width: 100%; margin-bottom: 10px;">
    <img src="你的第二张图片地址" alt="图片2" style="width: 100%;">
  </div>
  <!-- 右侧表格 -->
  <div>
    <table border="1">
      <tr>
        <th>表头1</th>
        <th>表头2</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
    </table>
  </div>
</div>

这个方案的优势是左右两列宽度自动均分，而且左侧图片容器会和右侧表格高度对齐，不管图片高度多少，都不会跑到表格下方。

方案二：使用CSS Flex布局 #

Flex布局同样能轻松实现需求，给父容器设置flex属性即可：

<div style="display: flex; gap: 20px;">
  <!-- 左侧图片容器 -->
  <div style="flex: 1;">
    <img src="你的第一张图片地址" alt="图片1" style="width: 100%; margin-bottom: 10px;">
    <img src="你的第二张图片地址" alt="图片2" style="width: 100%;">
  </div>
  <!-- 右侧表格 -->
  <div style="flex: 1;">
    <table border="1">
      <tr>
        <th>表头1</th>
        <th>表头2</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
    </table>
  </div>
</div>

这里的flex:1表示左右两个容器平分父容器宽度，你也可以根据需求调整比例，比如左侧设flex:2、右侧flex:3来分配不同宽度。

小提示 #

• 给图片设置width:100%可以让它自适应容器宽度，避免超出范围
• gap属性用来设置左右容器的间距，你可以根据视觉需求调整数值
• 如果表格内容多、高度高，左侧图片容器会自动撑到相同高度，布局不会错乱

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