javascript - 使用溢出自动移动 div 中的元素

Question

当我尝试使用 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>

现在想象一下，容器 div 中的控件占用了足够的空间，以至于溢出边距出现在左侧，即控件延伸到容器 div 底部的下方。如果我尝试使用 javascript 将 control1 上的 listOUT 类更改为 listIN，则控件将向左移动。在我看来，如果容器 div 的新宽度和滚动条就位，浏览器似乎正在将 control1Container 重新调整到一个新位置，即 17%。

有什么想法吗？

Answer 1

您需要给容器 div position:relative，以便其中的绝对定位元素相对于它定位..