居中一個div，然後在它旁邊固定一個導航

我需要一個居中的960px <div>。然後我需要一個100像素的<nav>顯示固定，並在960px div的左側。所以<nav>總是在視野中，並觸及居中的960px <div>。居中一個div，然後在它旁邊固定一個導航

我該怎麼做？

這裏的主要問題是，資產淨值必須觸及960像素股利。不要觸摸瀏覽器的邊緣。嘗試水平調整瀏覽器大小以查看它如何粘貼到窗口而不是內容。

960像素div必須居中。你不能把兩個都放在960像素的div中。

2013-06-01 Don P

你可以很容易地做到這一點是這樣的：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-01 23:55:53

幹得好！非常感謝:) –

不客氣。 :-) –

我希望我能正確理解你的問題。但是，你最好的選擇是將導航和960格子浮在一起，然後居中。小提琴即將來臨。

小提琴 - 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-01 20:19:03 Jako

然而，這非中心50像素DIV。那麼也許在持有者上添加100px的正確填充以便將它填充出來？ – Hawken

居中一個div，然後在它旁邊固定一個導航

回答

相關問題