Javascript 如何将一个div置于另一个div之下_Javascript_Jquery_Html_Css

Javascript 如何将一个div置于另一个div之下

javascript jquery html css

Javascript 如何将一个div置于另一个div之下,javascript,jquery,html,css,Javascript,Jquery,Html,Css,是的，我知道，这已经被问过很多次了。但是，没有其他解决方案可以解决我的问题我希望“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.

是的，我知道，这已经被问过很多次了。但是，没有其他解决方案可以解决我的问题

我希望“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>


容器
{
位置：相对位置；
背景色：#00ffcc；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
}
登记
{
位置：相对位置；
背景色：#ff0066；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
清除：左；
}
出身背景
{
显示器：flex；
对齐项目：居中；
背景图片：url（“bg.jpg”）；
背景重复：无重复；
背景尺寸：封面；
宽度：100vw；
高度：100vh；
浮动：无；
}
登录



用户名：




密码：



提交
登记
登记

用户名：




密码：



提交
$（文档）.ready（函数（）{
美元("货柜),延迟(75美元),法代因(250美元),；
$（“#注册”）。单击（函数（）{
$（“.register”）.slideToggle（）；
});
});

我该如何着手解决这个问题（并随时告诉我如何清理糟糕的css！）？谢谢。

对于

display:flex

的默认

flex方向是行
——它将水平并排放置项目。要使它们像列一样彼此重叠显示，请使用flex-direction:column



容器
{
位置：相对位置；
背景色：#00ffcc；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
}
登记
{
位置：相对位置；
背景色：#ff0066；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
清除：左；
}
出身背景
{
显示器：flex；
对齐项目：居中；
背景图片：url（“bg.jpg”）；
背景重复：无重复；
背景尺寸：封面；
宽度：100vw；
高度：100vh；
浮动：无；
弯曲方向：立柱；
证明内容：中心；
}
登录



用户名：




密码：



提交
登记
登记
$（文档）.ready（函数（）{
美元("货柜),延迟(75美元),法代因(250美元),；
$（“#注册”）。单击（函数（）{
$（“.register”）.slideToggle（）；
});
});
将弹性方向
更改为列，默认为行，这意味着所有弹性项目将水平显示在一行中
您需要将align items
更改为justify content
，因为在从行切换到列时，这两个选项的效果会互换


容器
{
位置：相对位置；
背景色：#00ffcc；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
}
登记
{
位置：相对位置；
背景色：#ff0066；
保证金：0自动；
填充：1em 3em；
盒影：0px 0px 35px rgba（0,0,0,1）；
字体大小：15px；
显示：无；
清除：左；
}
出身背景
{
显示器：flex；
弹性方向：列；/*添加*/
对齐内容：居中；/*已从对齐项目更改*/
背景图片：url（“bg.jpg”）；
背景重复：无重复；
背景尺寸：封面；
宽度：100vw；
高度：100vh；
浮动：无；
}
登录



用户名：




密码：



提交
登记
登记
$（文档）.ready（函数（）{
美元("货柜),延迟(75美元),法代因(250美元),；
$（“#注册”）。单击（函数（）{
$（“.register”）.slideToggle（）；
});
});
谢谢！然而，现在第一个div出现在页面的顶部而不是中间，这就是为什么我首先让它灵活的原因。我该如何解决这个问题？@billofbong啊很抱歉，您使用justify content:center在弯曲方向：列
布局以垂直居中。编辑了我的答案。