Wie ein div unter einem anderen platzieren

Ja, ich weiß, das wurde schon oft gefragt. Keine der anderen Lösungen behebt mein Problem jedoch.Wie ein div unter einem anderen platzieren

Ich möchte die "Register" div unter dem "Container" Div, aber es erscheint neben ihm.

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

Wie gehe ich über dieses Problem zu beheben (und fühlen Sie sich frei, mir zu geben Tipps, wie meine schreckliche CSS aufzuräumen!)? Vielen Dank.

Quelle

2017-02-28 billofbong

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

Der Standardwert flex-direction für display: flex ist row - die Elemente horizontal nebeneinander platzieren. Für sie wie eine Säule, verwenden flex-direction: column auf aufeinander, machen Anzeige

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

Quelle

2017-02-28 22:28:30

Dank! Allerdings erscheint jetzt das erste div am oberen Rand der Seite statt der Mitte, weshalb ich es in erster Linie flex gemacht habe. Wie behebe ich das? – billofbong

@billofbong ah Entschuldigung, Sie benutzen 'justify-content: center;' in einem 'flex-direction: column' Layout, um etwas vertikal zu zentrieren. meine Antwort bearbeitet. –

Änderung flex-direction auf Spalte, die Standard-Reihe ist, was bedeutet, alle Flex-Elemente in einer Reihe horizontal angezeigt.

Sie müssen align-items zu justify-content ändern, da der Effekt dieser 2 beim Wechsel von Zeile zu Spalte vertauscht wird.

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

Quelle

2017-02-28 22:32:35 pol

Wie ein div unter einem anderen platzieren

Antwort

Verwandte Themen