0
所以我有一個父div(100%寬度),並在其中,3個子div(也是100%寬度)。我如何將第二個孩子的「默認顯示的div」設置爲左邊div離開屏幕左邊,右邊div離開右邊?居中3兒童divs,所有100%寬度?
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)。我將如何實現這一目標?謝謝!