1

这就是我创建的。我在 iPad 中设置class='handHeld'为<body>，基于它，optionsWrapper 和#container 应该使用我在 jsfiddle.net 底部定义的 CSS 类来切换位置。

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

像这样：在此处输入图像描述

如何仅使用 CSS 来实现？请注意，前 3 行（绿色、灰色和蓝色）可能并不总是存在，所以我不能静态抓取它们的高度来定位div.optionsWrapper？

4

1 回答 1

1

由于optionsWrapper是 的孩子container，因此您无法通过 CSS 执行此操作。您必须将两个 div 并排作为开始。然后，两个 div 之一必须具有绝对高度（以 px 为单位）。最后但并非最不重要的position一点是，他们父母的风格必须是relative. 拥有父亲戚，absolute left/top:0optionsWrapper 上的设置应将其放在容器的左上角。

通过这里的内联样式最简单的说明：

没有“手持”，您的标准样式（但有“外部”选项）

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

当 body 具有“手持”类时：

<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/

于 2012-10-06T20:15:52.940 回答