2017-02-28 16 views
0

はい、私は知っています、これは前に何度も尋ねられています。しかし、私の問題を解決する他の解決策はありません。divを別のものの下に置く方法

「登録」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をクリーンアップする方法のヒントを与えること自由に感じ!)のですか?ありがとう。

+0

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

答えて

1

display: flexのデフォルトflex-directionは、アイテムを横に並べて配置します。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>

+0

ありがとう!しかし、今では最初のdivが中央の代わりにページの上部に表示されます。そのため、最初にdivを作成しました。これをどうやって解決するのですか? – billofbong

+0

@billofbongああ、申し訳ありません。あなたは 'flex-direction:column'レイアウトで' justify-content:center; 'を使って、何かを垂直方向にセンタリングします。私の答えを編集しました。 –

0

変更flex-directionを使用し、デフォルトでは、すべてのフレックス項目が水平に一列に表示されますを意味している行です。

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>

関連する問題