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滚动（as seen here）。我怎么做到这一点？谢谢！

Answer 1

您在小提琴中的功能（checked here）可以这样修复：

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

你只围绕一个包装器，每个包含一个带有'cur'类的div。

居中3个儿童div，全部100％宽度？

1 个答案: