如何将我的两个 <div> 放在同一个对齐上？ [复制]

Posted 2023-03-05

【中文标题】如何将我的两个 <div> 放在同一个对齐上？ [复制]

【英文标题】：How can I place my two <div> on the same alignment? [duplicate]

【发布时间】：2021-04-05 03:16:50

【问题描述】：

我希望“登录”和“注册”与顶部的高度对齐，请查看下面的示例以获得更清晰的信息

我也想成为这样的人

我也使用 Bootstrap 4，但不是为了我想做的事情，我在某处读到最好不使用 Bootstrap 自己做。

这是我使用的代码：

css:

.content
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;


.content > div
  padding:10em;
  flex: 1;
  width: 100%;

html:

<div class="content">
        <div class="content-one">
            <h1>Login</h1>
            <form method="post">
                <div class="form-group">
                    <label>Username</label>
                    <div class="control">
                        <input type="text" class="form-control" name="username" placeholder="Username" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Password</label>
                    <div class="control">
                        <input type="password" class="form-control" name="password" placeholder="Password" />
                    </div>
                </div>

                <div class="form-group">
                    <input value="Log in" type="submit" class="btn btn-red fw-4" />
                </div>
            </form>
        </div>
        <div class="content-two">
            <h1>Register</h1>
            <form action="/register" method="post">
                <div class="form-group">
                    <label>Username</label>
                    <div class="control">
                        <input type="text" class="form-control" name="username" placeholder="Username" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <div class="control">
                        <input type="text" class="form-control" name="email" placeholder="Email">
                    </div>
                </div>

                <div class="form-group">
                    <label>Password</label>
                    <div class="control">
                        <input type="password" class="form-control" name="password" placeholder="Password" />
                    </div>
                </div>

                <div class="form-group">
                    <label>Are you a robot ?</label>
                    <div class="control">
                        <div class="g-recaptcha" data-sitekey="6Le18_YZAAAAAPZHps-_4XB3U6yTXh0dMFsJdJpF"></div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                        <p class="form-check-label" for="defaultCheck1">
                            I have read and agree <a href="#">the terms of use</a>.
                        </p>
                    </div>
                </div>

                <div class="form-group">
                    <input value="Register" type="submit" class="btn btn-grey" />
                </div>
            </form>
        </div>
    </div>

如果可以使用 Bootstrap 4 完成，我也可以。

【问题讨论】：

需要提供一个工作示例来测试代码或尝试align-items:flex-start;来解决问题。

对齐项目：弹性开始；将根据需要对齐它。在“align-items”属性中将“center”替换为“flex-start”

@Coder111 ;这是我得到的minimal reproducible example(imgur.com/a/7tXWzKo)

还有@OnkarSingh

【参考方案1】：

删除 align-items: center; 样式并将填充设置为 0 3em（将 3em 更改为您想要的值）

.content 
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  overflow: hidden;


.content>div 
  flex: 1;
  width: 100%;
  padding:0 3em; // Update 3em to fit your UI

<div class="content">
  <div class="content-one">
    <h1>Login</h1>
    <form method="post">
      <div class="form-group">
        <label>Username</label>
        <div class="control">
          <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="control">
          <input type="password" class="form-control" name="password" placeholder="Password" />
        </div>
      </div>

      <div class="form-group">
        <input value="Log in" type="submit" class="btn btn-red fw-4" />
      </div>
    </form>
  </div>
  <div class="content-two">
    <h1>Register</h1>
    <form action="/register" method="post">
      <div class="form-group">
        <label>Username</label>
        <div class="control">
          <input type="text" class="form-control" name="username" placeholder="Username" />
        </div>
      </div>

      <div class="form-group">
        <label>Email</label>
        <div class="control">
          <input type="text" class="form-control" name="email" placeholder="Email">
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="control">
          <input type="password" class="form-control" name="password" placeholder="Password" />
        </div>
      </div>

      <div class="form-group">
        <label>Are you a robot ?</label>
        <div class="control">
          <div class="g-recaptcha" data-sitekey="6Le18_YZAAAAAPZHps-_4XB3U6yTXh0dMFsJdJpF"></div>
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
          <p class="form-check-label" for="defaultCheck1">
            I have read and agree <a href="#">the terms of use</a>.
          </p>
        </div>
      </div>

      <div class="form-group">
        <input value="Register" type="submit" class="btn btn-grey" />
      </div>
    </form>
  </div>
</div>

【讨论】：

为了完整起见：Bootstrap 有spacing classes。无需在 CSS 中设置间距。

【参考方案2】：

在.content 上删除此属性align-items: center;

.content
  height: calc(100vh - 100px);
  width: 100%;
  display: flex;
  /*align-items: center;*/ /*remove this*/
  overflow: hidden;