CSS定位 - 固定中心 - 固定左和右固定正确的元素

时间:2013-01-17 11:18:21

标签: html css css3

对于为iPad创建的网站内的幻灯片,我有以下结构

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

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

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

.slide4A1 - 向左固定   .slide4A2 - 固定中心   .slide4A3 - 修正了

我试过左右浮动幻灯片1和3并以自动边距为中心 - 但布局误入歧途 - 任何想法?

js fiddle here - http://jsfiddle.net/chunk_pd/PAqSb/6/

3 个答案:

答案 0 :(得分:1)

我相信这是你期望看到的:

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

答案 1 :(得分:1)

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

更重要的是 - 你的JS中有一个拼写错误:

$('.slide4A1').animate({left:'0px;',}, 1600);只需删除;在0px和瞧之后。

答案 2 :(得分:0)

应用宽度:100%,边距:0自动滑动4 宽度:33%滑动4A1,slide4A2,slide4A3

Float Left to slide4A1并向右浮动到slide4A3类...... !!