1

我正在尝试创建一个包含四个div容器的页面，每个容器的宽度为 100%，高度为 100%。我希望div在中间有一个 main，然后在它的左、右和底部有一个（是的，为了 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;
}

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

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

有任何想法吗？

4

2 回答 2

2

您的挑战与元素定位无关 - 而是您需要页面在加载时已经滚动到布局的水平中心。这只能通过javascript完成。 这是一个很棒的 q/a 和一个工作小提琴。

更新：这是使用上面链接中的技术和脚本更新的代码。在 Codepen 上查看。

于 2013-10-25T03:35:18.437 回答
0

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

于 2013-10-25T03:40:12.463 回答