如何在另一个下面放置一个div

Question

Yes, I know, this has been asked many times before. 是的，我知道，这已经被问过很多次了。 None of the other solutions fix my problem, however. 但是，没有其他解决方案可以解决我的问题。

I want the "register" div to slide down underneath the "container" div, but it appears next to it. 我希望“ register” div在“ container” 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>

How do I go about fixing this problem (and feel free to give me tips on how to clean up my terrible css!)? 我该如何解决该问题（并随时给我有关如何清理可怕的CSS的提示！）？ Thanks. 谢谢。

Answer 1

The default flex-direction for display: flex is row - that will put items side-by-side horizontally. 显示的默认flex-direction display: flex为row将水平并排放置项目。 To make them display on top of one another, like a column, use flex-direction: column 要使它们像一列一样彼此重叠显示，请使用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

change flex-direction to column, the default is row which means all flex items will appear in one row horizontally. 将flex-direction更改为column，默认值为row，这意味着所有flex项目将水平出现在一行中。

You will need to change align-items to justify-content , since the effect of those 2 is swapped when switching from row to column. 您将需要将align-items更改为justify-content ，因为从行切换到列时，这2个的效果会互换。

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

如何在另一个下面放置一个div

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-02-28 22:28:30

解决方案2
0 2017-02-28 22:32:35

如何在另一个下面放置一个div

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-02-28 22:28:30

解决方案2 0 2017-02-28 22:32:35

解决方案1
1 已采纳 2017-02-28 22:28:30

解决方案2
0 2017-02-28 22:32:35