<div> 雙重擴展，HTML和問題 <div> 建造

Question

擴展<div>元素時遇到一些問題。

我有2個buttons ，一個在右上角，一個在左上角。 每個按鈕都會擴展一個隱藏區域。

我的問題是，當一個區域擴展時，然后您擴展另一區域時，它會在<div>創建更多的空間。 我不確定如何解決這個問題。 這是上面描述的屏​​幕截圖 ，我將包括必要的代碼。 多謝你們！

 function main() { $('.form-login').hide(); $('.form-register').hide(); $('.sub-elements').hide(); $('.main-elements').on('click', function() { $(this).find('.sub-elements').slideToggle(300); }); $('.login-button').on('click', function() { $('.form-login').slideToggle(300); }); $('.register-button').on('click', function() { $('.form-register').slideToggle(300); }); } $(document).ready(main); 

 .form-login { border-style: dashed; border-color: green; margin: 25px 1000px 0px 0px; width: 15%; color: whitesmoke; font-family: 'sans-serif'; font-size: 14px; } .form-register { border-style: dashed; border-color: blue; margin-left: 1110px; width: 15%; color: whitesmoke; font-family: 'sans-serif'; border-style: dashed; border-color: purple; font-size: 14px; margin-top: 10px; } .header { font-size: 125px; text-align: center; width: auto; border-style: dashed; border-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <button class="login-button">Login</button> <button class="register-button">Register</button> <div class="form-login"> <form> Email <br> <input type="text" name="email"> <br>Password <br> <input type="text" name="password"> <br> </form> </div> <div class="form-register"> <form> First Name <br> <input type="text" name="email"> <br>LastName <br> <input type="text" name="password"> <br>Email Adress <br> <input type="text" name="email"> <br>Password <br> <input type="text" name="password"> <br>Re-Enter Password <br> <input type="text" name="password"> <br> </form> </div> <img src="images/iceland.png" alt="Downtown" height="30%" width="55%" /> </div> 

Answer 1

顯示一個空格時-只需確保隱藏另一個空格即可：

 function main(){ $('.form-login').hide(); $('.form-register').hide(); $('.sub-elements').hide(); $('.main-elements').on('click',function(){ $(this).find('.sub-elements').slideToggle(300); }); $('.login-button').on('click',function(){ $('.form-register').slideUp(300); $('.form-login').slideToggle(300); }); $('.register-button').on('click',function(){ $('.form-login').slideUp(300); $('.form-register').slideToggle(300); }); } $(document).ready(main); 

 .form-login{ border-style: dashed; border-color: green; margin: 25px 1000px 0px 0px; width: 15%; color: whitesmoke; font-family: 'sans-serif'; font-size: 14px; } .form-register{ border-style: dashed; border-color: blue; margin-left: 1110px; width: 15%; color: whitesmoke; font-family: 'sans-serif'; border-style: dashed; border-color: purple; font-size: 14px; margin-top: 10px; } .header { font-size: 125px; text-align:center; width: auto; border-style: dashed; border-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "header"> <button class = "login-button">Login</button> <button class = "register-button">Register</button> <div class = "form-login"> <form> Email<br> <input type = "text" name = "email"><br> Password<br> <input type = "text" name = "password"><br> </form> </div> <div class = "form-register"> <form> First Name<br> <input type = "text" name = "email"><br> LastName<br> <input type = "text" name = "password"><br> Email Adress<br> <input type = "text" name = "email"><br> Password<br> <input type = "text" name = "password"><br> Re-Enter Password<br> <input type = "text" name = "password"><br> </form> </div> <img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/> </div> 

Answer 2

將以下代碼添加到CSS。

.form-login, .form-register
{
    position:absolute;
}