Question

我正在尝试创建一个包含四个div容器的页面，每个容器的宽度为100％，高度为100％。我希望在中间有一个主div，然后在它的左，右和底部有一个（是的，为了jQuery动画，它们必须像这样定位）。

以下是我当前的代码（这里是JSFiddle）：

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="container4"></div>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}

#container1 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: blue;
}

#container2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: -100%;
    background-color: red;
}

#container3 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 100%;
    background-color: green;
}

#container4 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
    left: 0;
    background-color: orange;
}

我对div的右侧和下方没有任何问题，但我似乎无法让左侧的那个工作。

我还试图将div左侧的left: 0和top: 0的主要div放在left: 100%和top: 0，但我不确定如何让页面加载查看主div（蓝色）。这方面的一个例子是this JSFiddle。

有什么想法吗？

Answer 1

您的挑战与元素定位无关 - 这是因为您需要在加载时将页面滚动到布局的水平中心。这只能通过javascript完成。 Here's a great q/a on this with a working fiddle.

更新：这是使用上面链接中的技术和脚本更新的代码。 View it on Codepen.

Answer 2

它不会那样工作正确和简单的方法是在页面加载时使用javascript集中于中心div 或者制作一个更大的内容div，其中包含所有其他div并根据您想要显示的div更改它的位置[您可以将页面宽度添加到其左侧属性以向右滚动等]。

绝对位置：负值

2 个答案: