div를 div 아래에 배치하는 방법

예, 여러 번 묻습니다. 그러나 다른 해결책으로는 내 문제를 해결할 수 없습니다.div를 div 아래에 배치하는 방법

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

는이 문제를 어떻게 해결에 대한 이동 (나를 내 끔찍한 CSS를 정리하는 방법에 대한 도움말을 줄 주시기 바랍니다!)합니까? 감사.

출처

2017-02-28 billofbong

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

display: flex에 대한 기본값은 flex-direction입니다.이 설정은입니다. 이렇게하면 항목이 가로로 나란히 배치됩니다. 그들이 서로의 상단에 표시하려면 열처럼, 기본 플렉스 항목을 수평으로 한 행에 나타납니다 모든 의미 행에 열을 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 아, 미안하네요. 플렉스 방향 : 열 레이아웃에서'justify-content : center; '를 사용하여 수직으로 가운데에 배치하십시오. 내 대답을 편집했습니다. –

변화 flex-direction이다 사용합니다.

하면 열에 로우로 전환 될 때 교체되는 것과 (2)의 효과 때문에, justify-content에 align-items을 변경해야한다.

<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를 div 아래에 배치하는 방법

답변

관련 문제