并排放置两个html部分的最佳方法[重复]答案

【问题标题】：Best way to place two html sections side by side [duplicate]并排放置两个html部分的最佳方法[重复]
【发布时间】：2021-11-15 23:06:27
【问题描述】：

总结问题

这个问题的目的是找到并排显示两个html部分的最佳方式。理想情况下，我希望能够像这样分解 UI

而不是当前设置

描述您的尝试

我已尝试自行修改 html，但我想从更有经验的开发人员那里获得有关如何执行此操作的建议。

显示一些代码

<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>

【问题讨论】：

flexbox 和 grid 都可以解决这个问题！
请注意，<center> 标签已经过时多年。不要使用它。
一个接一个地堆叠元素是典型的 HTML 行为。要修改它，您必须使用样式。您可以从此处复制和粘贴答案，但我认为您缺少 HTML 编程的基础知识。我建议您阅读一些类似developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout 的教程。它将为您节省未来的时间！

标签： html

【解决方案1】：

您可以尝试学习CSS Flexbox。例如：

.row {
  display: flex;
}

.column {
  flex: 50%;
  text-align: center;
}

.column-1 {
  background-color: red;
}

.column-2 {
  background-color: blue;
}

<div class="row">
  <div class="column column-1">Column 1</div>
  <div class="column column-2">Colum 2</div>
</div>

【讨论】：

【解决方案2】：

您可以搜索像 Bootstrap 这样的框架，它们内置了类来为您的 HTML 制作行、列和自定义布局

【讨论】：

【解决方案3】：

这是对 CSS Flexbox 的完美使用

以下是有关如何使用它的完整指南，因此您不会被锁定在一个实现中：

CSS Tricks

【讨论】：

【解决方案4】：

您可以为此使用flexbox。
所有输入都包含在inputBoxes 中，其中display:flex;。 center 标签不再使用，所以 justify-content: center; 被用来对齐弹性盒子。类似地，所有文本都使用 text-align: center; 对齐到中心

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id = "boxstyle">
         <h3 id="h3style">Section 5.2 Word Matching Exercise</h3>
         User Input:
         <div class="inputBoxes">
              <div><input id="el1" type="text" value=""></div>
              <div><input id="el2" type="text" value=""></div>
              <div><input id="el3" type="text" value=""></div>
              <div><input id="el4" type="text" value=""></div>
              <div><input id="el5" type="text" value=""></div>
         </div>
        
          Result in HTML :
         <div class="inputBoxes">
              <div><input id="dl1" type="text" value=""></div>
              <div><input id="dl2" type="text" value=""></div>
              <div><input id="dl3" type="text" value=""></div>
              <div><input id="dl4" type="text" value=""></div>
              <div><input id="dl5" type="text" value=""></div>
         </div>
         <span style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="process_input()">generate html</button>
         </span>
    </div>
</body>


<style>
body{ 
    text-align: center;
    }
.inputBoxes{
    display: flex;
    justify-content: center;
}

.inputBoxes div{
    margin-left: 2%;
}

</style>
</html>

【讨论】：