【问题标题】:Shifting elements in a div with overflow auto使用溢出自动移动div中的元素
【发布时间】:2010-01-15 13:37:50
【问题描述】:

当我尝试使用 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 的底部下方。如果我尝试将 control1 上的 listOUT 类更改为使用 javascript 说 listIN,则控件将向左移动。对我来说,如果容器 div 的新宽度和滚动条就位,浏览器似乎正在将 control1Container 重新调整到 17% 的新位置。

有什么想法吗?

【问题讨论】:

  • 显示 = 显示?你的滚动条出现在什么元素上?
  • 容器元素的滚动条出现。使用 javascripts 更改类时 control1Container 元素向左移动
  • 另一件事:display:inline 实际上是 display:block 用于定位非静态元素的元素。
  • Resuduum 上面说您在上面的示例中有一个类型 .. 在您输入错误的内联样式中显示为显示 ..
  • 容器元素根本不应该有滚动条,因为 control1container 和 control2container 都是绝对定位的,因此在常规页面流之外。不知何故,您的脚本似乎打破了控件的绝对定位,但我不知道没有看到类开关的实现以及 listIN 和 listOUT 的 css 定义(或演示页面)。

标签: javascript html css


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-22
    • 2014-01-16
    • 2019-12-09
    • 2010-09-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多