2015-06-16 34 views
0

所以我有一個父div(100%寬度),並在其中,3個子div(也是100%寬度)。我如何將第二個孩子的「默認顯示的div」設置爲左邊div離開屏幕左邊,右邊div離開右邊?居中3兒童divs,所有100%寬度?

here is my code so far

HTML:

<div id="wrapper"> 
    <div id="left" class="fixed-container"> 
     <div id="left-wrap" class="moving"> 
      <div id="left-prev" class="prev content-container">prev</div> 
      <div id="left-next" class="next content-container">next</div> 
      <div id="left-cur" class="cur content-container">cur</div> 
     </div> 
    </div> 
    <div id="right" class="fixed-container"> 
     <div id="right-wrap" class="moving"> 
      <div id="right-prev" class="prev content-container">prev</div> 
      <div id="right-next" class="next content-container">next</div> 
      <div id="right-cur" class="cur content-container">cur</div> 
     </div> 
    </div> 
</div> 

CSS:

/*RESET*/ 
html, body { 
    margin:0; 
    padding:0; 
} 

/*page wrapper style and layout*/ 
#wrapper { 
    width:100vw; 
    height:100vh; 
    background:white; 
} 

/*left and right fixed container 
---------------------------------*/ 

/*STYLES*/ 
.fixed-container { 
    width:50%; 
    height:100%; 
    position:relative; 
    overflow-x:scroll; 
} 
#left { 
    background:#99FF99; 
} 

/*LAYOUT*/ 
#left { 
    float:left; 
} 
#right { 
    float:right; 
} 

/*back, current and next div wrapper*/ 
.moving { 
    height:100%; 
    width:300%; 
    position:absolute; 
} 

/*back, current and next containers 
------------------------------------*/ 

/*STYLES*/ 
.content-container { 
    height:100%; 
    width:33.33%; 
} 
.next { 
    background:#fa342f; 
} 
.cur { 
    background:#a82f33; 
} 

/*LAYOUT*/ 
.prev { 
    float:left; 
} 
.next { 
    float:right; 
} 
.cur { 
    margin:0px auto; 
} 

基本上我在頁面加載要左,右的div顯示$( 「小人」)。我試過使用scrollTo插件,但只有左div卷軸(as seen here)。我將如何實現這一目標?謝謝!

回答

0

你的小提琴(checked here)函數可以固定這樣的:

$(document).ready(function(){ 
    $(".fixed-container").each(
     function(i) { 
      $(this).scrollTo($('.cur').eq(i), {axis: "x"}); 
     } 
    ); 
}); 

你是中心只是一個包裝,每個人都有帶班「小人」一個div。