如何使用CSS和HTML实现交互式文本与登录表单的左右对齐布局

云原生阿岚

2026-10-1

布局解决方案

你可以通过flex布局实现两个模块水平并排、垂直居中对齐的效果，修改方法如下：

第一步：调整HTML结构

将打字动效文本和登录表单放在同一行的两个子容器内，替换原有滑块内的container-fluid部分代码：

<div class="container-fluid">
  <div class="row flex-container">
    <!-- 左侧打字文本区域 -->
    <div class="left-section">
      <div class="wrapper">
        <div class="typing-demo">
          Hello!<br> Welcome to the website-
        </div>
      </div> 
    </div>
    <!-- 右侧登录表单区域 -->
    <div class="right-section">
      <div class="form">
        <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div>
        <form class="register-form">
          <input type="text" placeholder="姓名"/>
          <input type="password" placeholder="密码"/>
          <input type="text" placeholder="邮箱地址"/>
          <button>注册</button>
          <p class="message">已有账号？<a href="#">立即登录</a></p>
        </form>
        <form class="login-form">
          <input type="text" placeholder="邮箱"/>
          <input type="password" placeholder="密码"/>
          <button>登录</button>
          <p class="message">企业/社团用户？<a href="#">点击注册</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

第二步：修改/新增CSS样式

在原有样式基础上新增以下代码，同时修正原有错误属性：

/* 新增flex容器样式，实现左右并排 */
.flex-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  box-sizing: border-box;
}
.left-section, .right-section {
  flex: 0 0 auto;
}
/* 调整原有wrapper的高度属性 */
.wrapper {
  height: auto;
}
/* 修正原有表单的错误margin属性 */
.form {
  margin: 0;
}