扩展 div 内容时的页面对齐方式更改答案

【问题标题】：Page alignment changes on expanding div content扩展 div 内容时的页面对齐方式更改
【发布时间】：2011-03-16 18:25:49
【问题描述】：

在我的网页中，我隐藏了一些 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 合并。

【问题讨论】：

你能解释一下你说的是哪些表单域吗？下拉菜单？文本框？等
添加 html 以便我们查看发生了什么。您如何以可见性或显示方式显示它们？
@Naveed : 下拉菜单、文本框、复选框.. 整个 div 向下移动..
@Ivan: 这么大的代码，我就贴一下它的要点。我用 display 显示和隐藏 div。
@Angeline，听起来这可能是一个清算问题，但我们无法判断，除非您提供指向实时站点的链接，或者更好的是提供 HTML 的 sn-p 和jsfiddle.net 上有问题的 CSS

标签： html css vertical-alignment

【解决方案1】：

您需要修改您希望它们显示在顶部的控件的类。在类中添加z-index: 10;，在选择checkbox或radiobutton的基础上，稍后要显示的div（family1）。

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

【讨论】：