如何在AsciiDoc中实现表格与图片并排显示

以下几种方法可以解决图片和表格自动换行的问题，替代效果不佳的嵌套表格方案：

1. 浮动布局（HTML） #

利用CSS浮动属性让图片靠左，表格自然排列在右侧，最后清除浮动避免影响后续内容：

<div style="overflow: auto;">
  <img src="你的图片地址" alt="图片描述" style="float: left; margin-right: 20px; width: 200px;">
  <table style="border-collapse: collapse;">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
    <tr>
      <td>内容项1</td>
      <td>内容项2</td>
    </tr>
  </table>
  <div style="clear: both;"></div>
</div>

• 调整width控制图片尺寸，margin-right设置图片与表格的间距
• overflow: auto用于防止父容器因浮动元素高度塌陷

2. Flexbox布局（HTML） #

用现代Flexbox实现灵活的横向排列，兼容性好且布局更可控：

<div style="display: flex; gap: 20px; align-items: flex-start;">
  <img src="你的图片地址" alt="图片描述" style="width: 200px;">
  <table style="border-collapse: collapse; flex: 1;">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
    <tr>
      <td>内容项1</td>
      <td>内容项2</td>
    </tr>
  </table>
</div>

• display: flex启用横向布局，gap控制元素间间距
• align-items: flex-start让图片与表格顶部对齐
• flex: 1让表格自动填充剩余空间

3. 外层表格布局（HTML） #

将图片和目标表格放在同一个外层表格的不同单元格中，实现强制并排：

<table style="border-collapse: collapse;">
  <tr>
    <td style="padding-right: 20px;">
      <img src="你的图片地址" alt="图片描述" style="width: 200px;">
    </td>
    <td>
      <table style="border-collapse: collapse;">
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
        <tr>
          <td>内容项1</td>
          <td>内容项2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

• 外层表格仅用于控制并排布局，可按需调整单元格的padding控制间距
• 此方法兼容性极强，适合所有支持HTML表格的平台

注意事项 #

• 若表格内容过多超出剩余宽度，可给表格添加style="table-layout: fixed; max-width: 600px;"强制固定宽度或自动换行
• 部分平台可能对inline CSS有轻微限制，优先使用上述基础样式

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