對齊兩個div與頭格

我試圖讓佈局看起來像這樣如下：對齊兩個div與頭格

http://i42.tinypic.com/2i8wyrk.png

我已經成功地獲得了「內容」 DIV對準精與頭格，但我不知道如何把nav div放在那裏，並保持它正確對齊。這是我到目前爲止：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Page Title</title> 
<style> 
div#container { 
    position: relative; 
} 
body { 
    background-color: #121212 
} 
div#header { 
    background-color: #900; 
    width: 70%; 
    height: 10%; 
    border: 2px solid #488ed0; 
    margin: 0 auto; 

} 
div#nav { 
    position: absolute; 
    background-color: #900; 
    border: 2px solid #488ed0; 
    width: 150px; 
    height: 200px; 
    float: left; 
} 
div#content { 

    border: 2px solid #488ed0; 
    background-color: #900; 
    width: 70%; 
    height: 900px; 
    margin: 0 auto; 
} 
a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 
a:hover { 
    color: #000000; 
    text-decoration: underline; 
} 
</style> 
</head> 

<body> 
<div id = "container"> 
<div id="header"> 
<center><img src = "images/logo.png" /></center> 
</div> 
<br /> 
<div id="nav"> 
<center><br /> 
<a href='#'>Index</a><br /> 
<a href='#'>About</a><br /> 
<a href='#'>Contact</a> 
</center> 
</div> 
<div id="content"></div> 
</div> 
</body> 
</html>

如何對齊導航div，因爲它是在我做的示例模型？我想確保'nav'的左側與標題保持一致，並且'content'的右側與標題的右側保持對齊。

來源

2013-07-12 Rein S

這裏是一個解決方案，如果你正在尋找一個液體佈局：http://jsfiddle.net/M78q4/1/

HTML

<div id="head">this</div> 
<div id="container"> 
    <div id="nav"></div><div id="content"></div> 
</div>

CSS

div#container { 
    position: relative; 
    width: 75%; 
    margin: 0 auto; 
} 
body { 
    background-color: #121212 
} 
div#header { 
    background-color: #900; 
    width: 100%; 
    height: 10%; 
    border: 2px solid #488ed0; 
    margin: 0 auto; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
div#nav { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    background-color: #900; 
    border: 2px solid #488ed0; 
    width: 24%; 
    height: 200px; 
    float: left; 
    margin-right: 2%; 
} 
div#content { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    border: 2px solid #488ed0; 
    background-color: #900; 
    width: 74%; 
    height: 900px; 
    float: left; 
} 
a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 
a:hover { 
    color: #000000; 
    text-decoration: underline; 
}

如果你不希望它是液體只是改變#container的寬度爲固定寬度像800像素。根據需要調整邊距。

來源

2013-07-12 20:59:08 eivers88

這個工程很漂亮！不知道-moz-box-sizing位是什麼，我應該查找什麼來了解更多信息？ –

這只是一小塊魔法=]：http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – eivers88

對於導航我注意到，您正在使用position: absolute和float: left;。雖然對齊可能需要調整一下最佳解決方案，但我可以想到的是將float用於導航和內容。例如：

#header{ 
    margin: 0 auto; 
    width: 800px; 
    height: 200px; 
} 

#container{ 
    margin: 0 auto; 
    width: 800px; 
    height: auto; 
} 

#nav{ 
    float: left; 
    width: 200px; 
    height: auto; 
} 

#content{ 
    float: right; 
    width: 600px; 
    height: 500px; 
} 

.clear{ 
    clear: both; 
}

當然，根據您希望的間距調整寬度，高度和邊距。

<div id="header">This is my banner</div> 
<div id="container"> 
    <div id="nav">This is my navigation menu</div> 
    <div id="content">This is my content</div> 
</div> 
<div class="clear">

如果你想確保將邊緣到導航節時使用margin-right，如果你想保證金添加到內容部分使用margin-left事情保持一致。最後，如果您需要在橫幅和下面兩部分之間留出空格，則在header CSS內使用margin-bottom。

來源

2013-07-12 20:46:00 Jester

這是一個好的開始。我試了一下，它使得導航欄一直貼着頁面的左側，而內容div的右側被推到頁面的右側;標題保持居中。從這裏我應該左右頁邊距和頁邊距右邊讓他們正確排列在標題下？ –

我很抱歉，讓我更新我的代碼。您將需要創建一個容器。此容器將包含導航和內容CSS。現在更新！ – Jester

這應該讓你的佈局後：http://jsfiddle.net/WDvwP/

HTML

<div id="head"></div> 
<div id="container"> 
    <div id="nav"></div><div id="content"></div> 
</div>

CSS

#head{ 
    width:900px; height:100px; 
    background:#f00; 
    margin:10px auto; 
} 
#container{ 
    width:900px; margin:0 auto; 
} 
#nav{ 
    display:inline-block; 
    width:250px; height:300px; 
    background:#0f0; 
} 
#content{ 
    display:inline-block; 
    width:600px; height:300px; 
    background:#00f; 
    margin:0 0 0 50px; 
}

來源

2013-07-12 20:50:56 Steven

對齊兩個div與頭格

回答

相關問題