gpt4 book ai didi

javascript - 如何仅使用 CSS 切换 2 个 div 的位置?

转载 作者:行者123 更新时间:2023-11-28 18:35:45 27 4
gpt4 key购买 nike

这是 what I've created .我正在设置 class='handHeld'<body>在 iPad 中,基于它optionsWrapper 和#container 应该使用我在 jsfiddle.net 底部定义的 CSS 类来切换位置。

.handHeld div.optionsWrapper { ... }
.handHeld div#container { ... }

像这样:enter image description here

如何仅使用 CSS 实现?请注意,前 3 行(绿色、灰色和蓝色)可能不总是在场所以我不能静态地捕获他们的高度来定位div.optionsWrapper

最佳答案

由于 optionsWrappercontainer 的子项,因此您无法通过 CSS 执行此操作。您必须将两个 div 并排作为开始。然后,两个 div 之一必须具有绝对高度(以像素为单位)。最后但同样重要的是,它们父级的 position 样式必须是 relative。拥有父亲戚,在 optionsWrapper 上设置 absolute left/top:0 应该将它放在容器的左上角。

此处通过内联样式最简单地说明:

没有'handheld',你的标准样式(但有选项'outside')

<div style="position: relative">
<div id="container"> stretching? lots of contents </div>
<div id="optionsWrapper"> left right </div>
</div>

当 body 有 'handheld' 类时:

<div style="position: relative; overflow:hidden:">
<div id="container"

style="margin-top: 50px; z-index:9;">

stretching? lots of contents
</div>
<div id="optionsWrapper"

style="position:absolute; top:0; left:0; z-index:99;">

left right
</div>
</div>

http://jsfiddle.net/QzQCt/

关于javascript - 如何仅使用 CSS 切换 2 个 div 的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12763231/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com