如何在HTML中实现块级图片并排展示？

解决方案 #

你当前代码中两个.wp-block-image容器为默认块级元素，会独占一行导致无法并排，使用Flex布局修改父容器样式即可实现预期效果，修正后的代码如下：

<div style="text-align:center;">
  <!-- 将原inline-block改为flex布局，设置间距和居中对齐 -->
  <div style="display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;">
    <div class="wp-block-image">
      <figure class="aligncenter size-full">
        <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
          <img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
        </a>
        <br>
        <figcaption>
          <b><u><font size="+2">
            <a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png">Dashboard Example 1</a>
          </font></u></b>
        </figcaption>
      </figure>
    </div>

    <div class="wp-block-image">
      <figure class="aligncenter size-full">
        <!-- 修复原代码href属性缺失开头引号的语法错误 -->
        <a href="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png" target="_blank" rel="noopener">
          <img loading="lazy" width="517" height="261" src="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png" alt="" class="wp-image-5379">
        </a>
        <br>
        <figcaption>
          <b><u><font size="+2">
            <a href="https://www.geckoboard.com/uploads/CEO-dashboard-geckoboard.png">Dashboard Example 2</a>
          </font></u></b>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

改动说明 #

• 父容器样式替换为display: flex，开启弹性布局，直接实现子元素并排排列
• 新增gap: 30px控制两个图片块之间的横向间距，可根据需求调整数值
• 新增flex-wrap: wrap，适配小屏幕设备，宽度不足时自动换行展示
• 移除冗余的<center>标签，布局逻辑统一由CSS控制
• 修复了原代码中第二个图片链接href属性缺失开头引号的语法错误

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