如何实现HTML元素并排布局，在现有代码基础上新增2个并排模块？

现有代码已经实现了单个统计卡片的展示效果，要新增2个同类模块并排展示，核心是给3个模块套一层父容器，通过布局属性控制子元素横向排列即可，以下是3种可直接复用的实现方式：

方法1：Flex布局（最推荐，适配性最强） #

是目前前端最常用的横向布局方案，自动适配不同屏幕宽度，调整间距、对齐方式都非常方便，代码示例如下：

<!-- 父容器控制并排布局 -->
<div style="display: flex; gap: 40px; align-items: flex-start; justify-content: space-around; padding: 20px; max-width: 1200px; margin: 0 auto;">
  <!-- 模块1：原有代码直接复用 -->
  <div>
    <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
    <br>&nbsp&nbsp&nbsp&nbsp&nbsp
    &#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
  </div>

  <!-- 模块2：仅替换内部文案和数值即可 -->
  <div>
    <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Monthly : 48k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <div style = "background-color:#ffcccc;color:red;font-size: 25px;display: inline-block; padding-left:10px"><span> + 12% YoY </span></div>
    <br>&nbsp&nbsp&nbsp&nbsp&nbsp
    &#x25BC<div style = "color:green;font-size: 15px;display: inline-block; padding-left:10px"><span> 12 pts vs. last period </span></div>
  </div>

  <!-- 模块3：仅替换内部文案和数值即可 -->
  <div>
    <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Quarterly : 140k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 8% YoY </span></div>
    <br>&nbsp&nbsp&nbsp&nbsp&nbsp
    &#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 5 pts vs. last period </span></div>
  </div>
</div>

参数说明：

• gap：控制模块之间的间距
• justify-content：控制模块的水平分布规则，可选值为space-around/space-between/center等
• max-width：限制整体最大宽度，避免宽屏下拉伸变形

方法2：Grid布局（适合多列规整排版） #

适合固定列数的多模块排版，代码更简洁，直接平均分配容器宽度：

<!-- 父容器用Grid控制3列布局 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 20px;">
  <!-- 三个模块的内部代码和方法1完全一致，直接复用即可 -->
  ...
</div>

适用场景：需要做规整的多列卡片布局，后续如果要加列只需要修改repeat的第一个参数即可。

方法3：inline-block原生实现（兼容低版本浏览器） #

不需要用到新的布局属性，兼容IE8及以上老旧浏览器：

<!-- 父容器设置font-size:0消除inline-block元素默认间距 -->
<div style="font-size: 0; max-width: 1200px; margin: 0 auto; padding: 20px;">
  <!-- 每个模块设置display:inline-block和宽度 -->
  <div style="display: inline-block; width: 32%; font-size: 16px; vertical-align: top; margin-right: 2%;">
    <!-- 模块内部代码直接复用 -->
    ...
  </div>
  <div style="display: inline-block; width: 32%; font-size: 16px; vertical-align: top; margin-right: 2%;">
    <!-- 模块内部代码直接复用 -->
    ...
  </div>
  <div style="display: inline-block; width: 32%; font-size: 16px; vertical-align: top;">
    <!-- 模块内部代码直接复用 -->
    ...
  </div>
</div>

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