如何将div放在另一个下面

是的，我知道，这已被问过很多次。然而，其他解决方案没有解决我的问题。如何将div放在另一个下面

我希望“注册”div在“容器”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！）？谢谢。

来源

2017-02-28 billofbong

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Tareq

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

来源

2017-02-28 22:28:30

谢谢！然而，现在第一个div出现在页面的顶部而不是中心，这就是为什么我首先将它做出弯曲的原因。我该如何解决？ – billofbong

@billofbong啊对不起，你在'flex-direction：column'布局中使用'justify-content：center;'来垂直居中。编辑我的答案。 –

变化flex-direction列，则默认为行，这意味着所有Flex项目将水平出现在一行。

您需要将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>

来源

2017-02-28 22:32:35 pol

如何将div放在另一个下面

回答

相关问题