Javascript 带自动溢出功能的div中的换档元件

当我试图使用javascript事件更改类时，我遇到了页面布局的问题，我的控件正在移动。有人能帮我想出一些解决这个问题的办法吗。只有当左滚动条出现时，IE才会出现问题

下面是一个html的示例

<div id="container" style="overflow:auto;">
  <div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
     <div id="control1" class="listOUT" >I am a control</div>
  </div>
  <div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
     <div id="control2" class="listOUT" >I am a control</div>
  </div><!-- more controls here -->
</div>

我是一个控制者
我是一个控制者

现在，假设container div中的控件占用了足够的空间，溢出边距显示在左侧，即控件延伸到container div底部的下方。如果我尝试更改control1上的listOUT类，使用javascript表示listIN，则控件将移向左侧。在我看来，如果容器div的新宽度与滚动条保持一致，那么浏览器似乎正在将control1Container重新调整到一个新位置，即17%

---

有什么想法吗？

您需要给container div

位置：relative

，以便它内部的绝对定位元素相对于它进行定位。

dispaly=display？您的滚动条显示的是哪个元素？滚动条显示的是容器元素。当使用javascriptsone更改类时，control1Container元素将向左移动。另外一件事：display:inline有效地是display:block，用于定位为非静态的元素。上面的Resuduum表示您在上面的示例中有一个类型。。在内联样式中，您输入的显示错误为dispaly..container元素不应获得滚动条，因为control1container和control2container都是绝对定位的，因此不在常规页面流中。不知何故，您的脚本似乎打破了控件的绝对位置，但如果没有看到类开关的实现以及listIN和listOUT（或演示页面）的css定义，我就不知道了。