以3个子div为中心，所有宽度均为100％？

Question

因此，我有一个父div（宽度为100％），其中有3个子div（也是宽度为100％）。 如何将“默认显示的div”设置为第二个子级，以使左侧div不在屏幕上，右侧div在屏幕外？

到目前为止这是我的代码 。

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在页面加载时都显示$（“。cur”）。 我试过使用scrollTo插件，但仅左div滚动（ 如此处所示 ）。 我将如何实现？ 谢谢！

Answer 1

小提琴中的功能（ 在此处选中 ）可以像这样固定：

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

您只将一个包装器居中，每个包装器都有一个带有“ cur”类的div。