页面对齐在扩展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内容上的变化

回答

相关问题