实现两个HTML section模块并排展示的最优方法是什么？

1. 问题概述 #

本次提问目的是找到将两个HTML区域并排展示的最优方案，预期UI布局效果如下：

而非当前的布局效果：

2. 已尝试操作 #

曾尝试自行修改HTML代码实现目标效果，但未达成预期，希望得到相关指导建议。

3. 参考代码 #

<center>
        <div id="boxstyle">
          <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>

          <center>
            <div class="inputBoxes">
              User Input:
              <table id="tablestyle">
                <td>
                  <input id="el1" type="text" value="">
                </td>
                <td>
                  <input id="el2" type="text" value="">
                </td>
                <td>
                  <input id="el3" type="text" value="">
                </td>
                <td>
                  <input id="el4" type="text" value="">
                </td>
                <td>
                  <input id="el5" type="text" value="">
                </td>
              </table>
            </div>
          </center>
          <center>
            <div class="inputBoxes">
              Result in HTML:
              <table id="tablestyle">
                <td>
                  <input id="dl1" type="text" value="">
                </td>
                <td>
                  <input id="dl2" type="text" value="">
                </td>
                <td>
                  <input id="dl3" type="text" value="">
                </td>
                <td>
                  <input id="dl4" type="text" value="">
                </td>
                <td>
                  <input id="dl5" type="text" value="">
                </td>
              </table>
              <span style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
              </span>
            </div>
          </center>
          <center>

最优方案采用CSS Flex布局实现，改造成本低、兼容性好，适配也更灵活，具体修改内容如下：

核心修改点 #

• 给两个.inputBoxes区块新增一个共同的flex父容器，替换原来各自包裹的冗余<center>标签
• 给父容器添加flex布局属性，控制两个区块水平排列、设置间距、水平居中
• 补充原代码中table标签缺失的<tr>标签，避免浏览器渲染异常

完整修改后代码 #

<center>
  <div id="boxstyle">
    <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>
    <!-- 新增flex布局父容器 -->
    <div style="display: flex; justify-content: center; gap: 3rem; margin-top: 1rem; flex-wrap: wrap;">
      <div class="inputBoxes">
        User Input:
        <table id="tablestyle">
          <tr>
            <td><input id="el1" type="text" value=""></td>
            <td><input id="el2" type="text" value=""></td>
            <td><input id="el3" type="text" value=""></td>
            <td><input id="el4" type="text" value=""></td>
            <td><input id="el5" type="text" value=""></td>
          </tr>
        </table>
      </div>
      <div class="inputBoxes">
        Result in HTML:
        <table id="tablestyle">
          <tr>
            <td><input id="dl1" type="text" value=""></td>
            <td><input id="dl2" type="text" value=""></td>
            <td><input id="dl3" type="text" value=""></td>
            <td><input id="dl4" type="text" value=""></td>
            <td><input id="dl5" type="text" value=""></td>
          </tr>
        </table>
        <span style="padding: 3px">
          <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
        </span>
      </div>
    </div>
  </div>
</center>

补充说明 #

• 父容器添加的flex-wrap: wrap属性可实现响应式适配，页面宽度不足时两个区块会自动换行，适配移动端
• gap: 3rem可调整两个区块之间的间距，按需修改数值即可

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