0

我需要一个居中的 960px <div>。然后我需要一个 100px<nav>出现固定并在 960px div 的左侧。所以<nav>总是在视野中，并触摸居中的 960px <div>。

我怎样才能做到这一点？

接近的jsFiddle：http: //jsfiddle.net/hcsJ9/

这里的主要问题是导航需要接触 960px div。不接触浏览器的边缘。尝试水平调整浏览器的大小，看看它是如何粘在窗口而不是内容上的。

960px 的 div 必须居中。你不能把两者都放在一个 960px 的 div 中。

4

2 回答 2

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>
于 2013-06-01T23:55:53.117 回答
0

我希望我能正确理解你的问题。但是，您最好的选择是将导航和 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;
}
于 2013-06-01T20:19:03.587 回答