如何将表格置于注册文本框右侧？能否用<div>标签实现？

完全可以用<div>标签配合CSS来实现表格在注册文本框右侧的效果，下面给你两种常用的实现方式：

方法1：使用浮动（Float）布局 #

这种方式适合传统布局场景，通过给容器设置浮动属性实现并排：

<!-- HTML结构 -->
<div class="form-container">
  <!-- 注册文本框区域 -->
  <div class="register-form">
    <label>用户名：</label>
    <input type="text" placeholder="请输入用户名">
    <br>
    <label>密码：</label>
    <input type="password" placeholder="请输入密码">
    <!-- 更多注册表单元素 -->
  </div>
  <!-- 表格区域 -->
  <div class="info-table">
    <table border="1">
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
    </table>
  </div>
  <!-- 清除浮动避免父容器高度塌陷 -->
  <div style="clear: both;"></div>
</div>

<!-- CSS样式 -->
<style>
.register-form {
  float: left;
  width: 60%; /* 调整宽度占比 */
  padding: 20px;
  box-sizing: border-box;
}
.info-table {
  float: left;
  width: 40%; /* 对应剩余宽度 */
  padding: 20px;
  box-sizing: border-box;
}
</style>

方法2：使用Flex弹性布局（推荐） #

Flex是现代浏览器更推荐的布局方式，代码简洁且兼容性好：

<!-- HTML结构 -->
<div class="form-container">
  <div class="register-form">
    <!-- 注册文本框内容 -->
    <label>用户名：</label>
    <input type="text" placeholder="请输入用户名">
    <br>
    <label>密码：</label>
    <input type="password" placeholder="请输入密码">
  </div>
  <div class="info-table">
    <table border="1">
      <tr>
        <th>标题1</th>
        <th>标题2</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
      </tr>
    </table>
  </div>
</div>

<!-- CSS样式 -->
<style>
.form-container {
  display: flex;
  gap: 20px; /* 两个容器之间的间距 */
  padding: 20px;
}
.register-form {
  flex: 2; /* 占比2份 */
}
.info-table {
  flex: 1; /* 占比1份 */
}
</style>

核心逻辑就是把注册表单和表格分别放在独立的<div>容器中，通过CSS控制这两个容器的排列方式，就能实现你想要的左右并排效果。

内容的提问来源于stack exchange，提问作者Balraj Koli