Question

基本上这就是我的网站的样子：https://jsfiddle.net/9vugv3n5/ 现在我想将'中'div设置在页面的中心，将'left'设置为'right'，将其设置为'right'，将自动设置为中间div。哇这听起来令人困惑，但我希望你能得到它。

#wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 0;
}

#Home, #About, #Gallery, #Literature, #Contact {
text-align: center;
color: #222222;
font-family: 'source-sans';
height: calc(100% - 50px);
padding-top: 50px;
}


#Home {
background-color: #ccf0fa;
}

#About {
background-color: #c4f9de;
width: 300%;
}

#Gallery {
background-color: #dfcbff;
}

#Literature {
background-color: #fed5c8;
}

#Contact {
background-color: #fdecc8;
}


#left, #middle, #right {
width: 33.3333%;
float: left;
height: 100%;
padding-top: 50px;
}

#left {
    background-color: #000000;
}


#middle {
    background-color: #777777;
}

#right {
    background-color: #FFFFFF;
}

然后，另外我会将'中间'分成两个div并将其点击为右侧向右侧滚动并向左侧模拟

编辑：好的，我看到我没有很好地解释我的问题，所以我决定画一个小草图描述我想要的东西

http://s23.postimg.org/498qrzw63/left_middle_right.jpg

希望现在有点清楚

Answer 1

不要宽度：300％;大概。让它100％。它会起作用。

#About {
    background-color: #c4f9de;
    width: 100%;
}

“ID”应该是唯一的。根据jsfiddle示例，您使用了#About两次。

Answer 2

我建议看一下flex-box。我没有深入研究你的代码，但是你描述的问题应该可以通过使用flex-box

来解决

Answer 3

好的，我已经设法做到这一点，但现在我的滚动到固定导航栏jquery代码无效。

https://jsfiddle.net/9vugv3n5/3/

var elementPosition = $('#header_nav').offset();

$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
        $('#header_nav').css('position', 'fixed').css('top', '0');
    } else {
        $('#header_nav').css('position', 'static');
    }    
});

居中第二个浮动：向左浮动在div标签内

3 个答案: