居中一个 div，然后在它旁边固定一个导航答案

【问题标题】：Center a div, and then have a nav fixed next to it居中一个 div，然后在它旁边固定一个导航
【发布时间】：2013-06-01 20:01:37
【问题描述】：

我需要一个居中的 960px <div>。然后我需要一个 100px <nav> 固定显示在 960px div 的左侧。所以<nav> 始终在视野中，并触摸居中的 960px <div>。

我该怎么做？

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

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

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

【问题讨论】：

标签： css position css-position

【解决方案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>

【讨论】：

【解决方案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 不居中 50px。所以也许可以在支架上添加 100 像素的右填充以使其均匀？