Question

我需要一个居中的960px <div>。然后我需要一个100px <nav>看起来固定在960px div的左边。因此，<nav>始终在视图中，并触及居中的960px <div>。

我该怎么做？

这里的主要问题是导航需要触及960px div。没有触及浏览器的边缘。尝试水平调整浏览器大小以查看它如何粘贴到窗口而不是内容。

960px div必须居中。你不能把它们放在960px div中。

Answer 1

你可以很容易地这样做：http://codepen.io/pageaffairs/pen/Gtzqu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

nav {
    position: fixed;
    top: 0px;
    left: 50%;
    width: 100px;
    margin-left: -250px;
}

.centered300 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.item {
    padding: 10px;
    background: rgba(0,0,0,0.1);
    margin-bottom: 5px;
}


</style>

</head>
<body>
<nav>
    <p>Link 1</p>
    <p>Link 2</p>
    <p>Link 3</p>
</nav>

<section class="centered300">
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
    <div class="item">
        <p>Hello I'm a bunch of page content. I say random stuff blah blah blah.</p>
    </div>
</section>

</body>
</html>

Answer 2

我希望我能正确理解你的问题。但是，你最好的选择是将导航和960 div漂浮在彼此旁边然后居中。小提琴即将推出。

小提琴 - http://jsfiddle.net/wuPHQ/1/

<div id="holder">
    <div id="nav">Navigation</div>
    <div id="content">Content</div>
    <br clear="all" />
</div>


#holder {
    width: 1060px;
    margin: auto;
    border: 1px solid #eaeaea;
}

#nav {
    width: 100px;
    float: left;
}

#content {
    width: 960px;
    float: left;
}

将div居中，然后在其旁边修复导航

2 个答案: