Flutter Web渲染含两个相邻div的HTML片段实现方案咨询

原有HTML渲染异常的核心原因是flutter_widget_from_html_core对float浮动、position偏移定位、嵌套display:table/table-cell这类复杂CSS属性支持不全，同时这几类写法本身在邮件客户端里兼容性也很差，不符合同时支持App内渲染、邮件发送的需求。
可选实现方案分两类：

• 全端原生WebView渲染：替换仅支持移动端的webview_flutter为全平台兼容的flutter_inappwebview，可直接渲染任意标准HTML，无CSS兼容问题，覆盖Android/iOS/Web三端。
• 轻量组件渲染：如果要继续使用flutter_widget_from_html_core这类轻量HTML渲染组件，需要使用兼容性最高的基础HTML标签+简单内联样式，避开复杂定位属性，调整后的代码同时兼容主流邮件客户端，可直接作为邮件正文发送。

调整后的代码完全匹配原有布局效果，去掉了所有低兼容度属性，可被flutter_widget_from_html_core正常渲染：

<table border="0" cellpadding="0" cellspacing="0" style="height: 64px;">
  <tr>
    <!-- 左侧红色圆角图标区块 -->
    <td width="64" height="64" valign="middle" align="center" style="background: #FF0000; border-radius: 16px;">
      <img src="https://cdn.icon-icons.com/icons2/785/PNG/512/stopwatch_icon-icons.com_64805.png" width="32" height="32" />
    </td>
    <!-- 两区块之间16px间距 -->
    <td width="16"></td>
    <!-- 右侧绿色文字区块 -->
    <td height="64" valign="middle" align="center" style="background: #00FF00; padding: 0 12px;">
      <span style="font-size: 0.8rem; font-weight: bold; display: block;">Text1</span>
      <span style="font-size: 0.8rem; font-weight: bold; color: #FDA720; display: block;">Text2</span>
    </td>
  </tr>
</table>

代码调整点：

• 移除所有float、position偏移、嵌套table布局写法，全部使用原生table单元格属性控制排列、对齐，是各类HTML渲染环境支持度最高的布局方式
• 用空单元格实现两个区块的间距，替代margin写法，避免不同环境下margin渲染偏差
• 文字换行改用块级span实现，替代<br>标签，减少行高计算差异
• 删除冗余嵌套div，简化DOM结构，降低渲染异常概率

• Web端渲染如果出现图片加载失败，检查图片资源的CORS配置即可，和布局代码无关
• 上述代码可直接作为邮件正文发送，在主流邮件客户端中均不会出现布局错乱问题

内容的提问来源于stack exchange，提问作者Marc Van Daele