如何在另一個下面放置一個div
[英]How to place a div below another
問題描述
是的，我知道，這已經被問過很多次了。 但是，沒有其他解決方案可以解決我的問題。
我希望“ 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的提示！）？ 謝謝。
2 個解決方案
解決方案1
1 已采納 2017-02-28 22:28:30
顯示的默認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>
解決方案2
0 2017-02-28 22:32:35
將flex-direction更改為column，默認值為row，這意味着所有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>
Javascript：如何在單擊按鈕時在另一個div位置顯示一個div？
[英]Javascript: How to display a div at the place of another div on the click of a button?
如何在懸停時使用網格設計將疊加div放在另一個div上？
[英]How to place a overlay div on another div on hover with grid like design?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.