Question

在我的网页中，我隐藏了一些我的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中，我有另一个div，“详细信息”，如果我点击复选框，会出现2个文本框。因此，如果我点击所有3个乘客div的chkbox，则passenger3 div将与其下方的联系信息div合并。

Answer 1

您需要修改要在其上显示的控件的类。在选择z-index: 10;或family1的基础上，在课程中为您要显示的div（checkbox）添加radiobutton。

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

页面对齐在扩展div内容时发生变化

1 个答案: