頁面對齊在擴展div內容上的變化

在我的網頁中，我隱藏了一些div。他們的內容僅顯示點擊相應的複選框或單選按鈕。但在這種情況下，我的頁面對齊更改。表單域與它們下面的元素合併。我如何避免這種情況？頁面對齊在擴展div內容上的變化

在html，css和javascript中完成編碼。

代碼示例：

<div id ='passenger1"> 
    <div class="passenger-selection> 
     <input type="radio">Book for me</input> 
     <input type="radio">Book for my family</input> 
     <input type="radio">Book for others</input> 
    </div> 
    <div class="form_ui"> 
    <!-- Fields for myself --> 
    <div class="myself1"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // A few more textboxes too.. 

     </div> 

     <!-- Fields for family --> 
    <div class="family1" class="hidden"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // on clicking this chk box, a few more text fields are displayed 

     <div id="details" class="hidden"> 
       Date of Birth: 
      <input type="textbox"> 
       Passport Number: 
      <input type="textbox"> 

     </div> 
     </div> 

    <!-- Fields for others --> 
     <div class="others1" class="hidden"> 
     Title: 
      <select> 
       <option value="1" selected>Mr.</option> 
       <option value="2">Ms.</option> 
       <option value="3">Mrs.</option> 
      </select> 
     Name: 
      <input type="textbox"> 
     <input type="checkbox"/> 
         This passenger is above 18 years old. 
     // A few more textboxes too.. 

     </div> 


    </div> 
</div> 

<div id="passenger2"> 
     //Same as passenger1 
</div> 

<div id="passenger3"> 
     //Same as passenger1 
</div> 

<div id= "contactInfo"> 
    Email:<input type="textbox"/> 
    Phone No:<input type="textbox"/> 
</div>

CSS：

.hidden{ 
    display: none; 
    }

如果我點擊單選按鈕，無論是爲自己或家人或其他人的股利，將顯示。在家庭div裏面，我還有另一個div，如果點擊複選框，它會顯示2個文本框。因此，如果我點擊所有3個乘客div的chkbox，passenger3 div就會與其下面的聯繫信息div合併。

來源

2011-03-16 Angeline

你能解釋一下你正在談論的表單字段嗎？下拉菜單？文本框？ etc. – 2011-03-16 09:28:24

添加html，以便我們可以看到發生了什麼。你如何通過可視性或顯示來顯示它們？ – 2011-03-16 09:36:04

@Naveed：下拉菜單，文本框，複選框..整個div下移.. – Angeline 2011-03-16 09:48:33

您需要修改希望顯示在其上的控件的類。根據選擇的checkbox或radiobutton，在課程中添加z-index: 10;，以便稍後顯示您想要顯示的div（family1）。

您可能需要在最初顯示div的類上添加z-index:1;。即myself1

來源

2011-03-16 10:25:49

頁面對齊在擴展div內容上的變化

回答

相關問題