Question

是的，我知道，之前已多次询问过这个问题。但是，没有其他解决方案可以解决我的问题。

我想要＆＃34;注册＆＃34; div在＆＃34;容器下方向下滑动＆＃34; div，但它旁边出现了。

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style>
  .container
  {
    position: relative;
    background-color: #00ffcc;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
  }
  .register
  {
    position: relative;
    background-color: #ff0066;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
    clear: left;
  }
  .background
  {
    display: flex;
    align-items: center;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    float: none;
  }
  </style>
</head>
<body>
  <div class="background">
    <div class="container text-center" id="container">
      <h1>Login</h1>
      <br>
      <form action="login.php" method="post">
        <p>
          Username:
        </p>
        <input name="name" type="text" class="form-control"/>
        <br>
        <p>
          Password:
        </p>
        <input name="pw" type="password" class="form-control"/>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-danger" id="register">Register</button>
      </form>
    </div>
    <div class="register text-center">
      <form action="login.php" method="post">
        <h1>Register</h1>
        <p>
          Username:
        </p>
        <input name="name" type="text" class="form-control"/>
        <br>
        <p>
          Password:
        </p>
        <input name="pw" type="password" class="form-control"/>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $("#container").delay(75).fadeIn(250);
    $("#register").click(function(){
      $(".register").slideToggle();
    });
  });
  </script>
</body>
</html>

如何解决此问题（并随时向我提供有关如何清理可怕的CSS的提示！）？感谢。

Answer 1

flex-direction的默认display: flex为row - 这会将项目水平并排放置。要使它们像列一样显示在彼此之上，请使用flex-direction: column

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style>
  .container
  {
    position: relative;
    background-color: #00ffcc;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
  }
  .register
  {
    position: relative;
    background-color: #ff0066;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
    clear: left;
  }
  .background
  {
    display: flex;
    align-items: center;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    float: none;
    flex-direction: column;
    justify-content: center;
  }
  </style>
</head>
<body>
  <div class="background">
    <div class="container text-center" id="container">
      <h1>Login</h1>
      <br>
      <form action="login.php" method="post">
        <p>
          Username:
        </p>
        <input name="name" type="text" class="form-control"/>
        <br>
        <p>
          Password:
        </p>
        <input name="pw" type="password" class="form-control"/>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-danger" id="register">Register</button>
      </form>
    </div>
    <div class="register">
        Register
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $("#container").delay(75).fadeIn(250);
    $("#register").click(function(){
      $(".register").slideToggle();
    });
  });
  </script>
</body>
</html>

Answer 2

将flex-direction更改为列，默认为行，这意味着所有弹性项目将水平显示在一行中。

您需要将align-items更改为justify-content，因为在从行切换到列时会交换这些效果。

＆＃13;

<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style>
  .container
  {
    position: relative;
    background-color: #00ffcc;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
  }
  .register
  {
    position: relative;
    background-color: #ff0066;
    margin: 0 auto;
    padding: 1em 3em;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 1);
    font-size: 15px;
    display: none;
    clear: left;
  }
  .background
  {
    display: flex;
    flex-direction: column; /*add*/
    justify-content: center; /*changed from align-items*/
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    float: none;
  }
  </style>
</head>
<body>
  <div class="background">
    <div class="container text-center" id="container">
      <h1>Login</h1>
      <br>
      <form action="login.php" method="post">
        <p>
          Username:
        </p>
        <input name="name" type="text" class="form-control"/>
        <br>
        <p>
          Password:
        </p>
        <input name="pw" type="password" class="form-control"/>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-danger" id="register">Register</button>
      </form>
    </div>
    <div class="register">
        Register
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $("#container").delay(75).fadeIn(250);
    $("#register").click(function(){
      $(".register").slideToggle();
    });
  });
  </script>
</body>
</html>

＆＃13;

如何将div放在另一个下面

2 个答案: