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

Question

I have the following structure for a slide within a site created for an iPad

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

Each block contains background images which are controlled via media queries to allow them to fill the screen whether the Ipad is portrait or landscape.

I need to animate the blocks but want the positions to be as follows -

.slide4A1 - fixed left .slide4A2 - fixed centre .slide4A3 - fixed right

I have tried floating left and right for slides 1 and 3 and centering with auto margin- but the layout go's astray - any ideas?

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

Answer 1

I believe this is what you expected to see:

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);

        }

Updated jsfiddle .

Answer 2

First you have to clean your CSS - combining position: absolute; and float won't work. Use your wrapper <div id="slide4"> and set its positioning as relative and width: 100% . Both animated divs have to have position: absolute; top: 0px; position: absolute; top: 0px; in order to reach top of the wrapper.

What is more - you have a typo in your JS:

$('.slide4A1').animate({left:'0px;',}, 1600); just remove ; after 0px and voila.

Answer 3

Apply width :100%, margin:0 auto to slide4 width :33 % to slide4A1,slide4A2,slide4A3

Float Left to slide4A1 and float right to slide4A3 classes....!!