CSS 定位 - 固定中心 - 固定左侧和固定右侧元素

Question

我在为 iPad 创建的网站中的幻灯片具有以下结构

<div id="slide4">
    <div class="slide4A1"></div>
    <div class="slide4A2"></div>
    <div class="slide4A3"></div>
</div>

每个块都包含通过媒体查询控制的背景图像，以允许它们填满屏幕，无论 Ipad 是纵向还是横向。

我需要为块设置动画，但希望位置如下 -

.slide4A1 - 固定左侧 .slide4A2 - 固定中心 .slide4A3 - 固定在右边

我尝试过让幻灯片 1 和 3 左右浮动并使用自动边距居中 - 但布局走错了 - 有什么想法吗？

js 在这里摆弄 - http://jsfiddle.net/chunk_pd/PAqSb/6/

Answer 1

首先你必须清理你的 CSS - 组合 position: absolute; 和 float 是行不通的。使用您的包装器<div id="slide4"> 并将其定位设置为相对和width: 100%。两个动画 div 都必须有 position: absolute; top: 0px; 才能到达包装器的顶部。

更重要的是 - 你的 JS 中有错字：

$('.slide4A1').animate({left:'0px;',}, 1600); 删除即可；在0px 之后，瞧。

Answer 2

我相信这是你所期望看到的：

CSS：

#slide4 {position: relative; }
.slide4A1, .slide4A3{ position:absolute; top: 0; }
.slide4A1{background:#000;  width:120px; height:1024px; left:-120px;}
.slide4A2{background:#367ab2; width:531px; height:1024px; margin-left:auto; margin-right:auto; position:relative!important; display: none;}
.slide4A3{background:#ff7e00; width:120px; height:1024px; right:-120px;}

JS：

function goDown3bPt2(){
                $('.slide4A1').animate({left:'0',}, 1600);
                $('.slide4A2').fadeIn('slow');
                $('.slide4A3').animate({right:'0',}, 2100);

        }

更新jsfiddle。

Answer 3

将宽度：100%，边距：0 自动应用于幻灯片 4 宽度 :33 % 到 slide4A1,slide4A2,slide4A3

向左浮动到slide4A1，向右浮动到slide4A3类......！！