0

我正在尝试使布局看起来如下所示：

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

我已经设法使“内容” div 与标题 div 很好地对齐，但我不确定如何将导航 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？我想确保“导航”的左侧与标题对齐，“内容”的右侧与标题的右侧对齐。

4

3 回答 3

1

对于导航，我注意到您正在使用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. 最后，如果您需要在横幅和它下面的两个部分之间留一个空格，请margin-bottom在headerCSS 中使用。

于 2013-07-12T20:46:00.523 回答
0

这应该得到你所追求的布局：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-12T20:50:56.860 回答
0

如果您正在寻找液体布局，这是一个解决方案：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-12T20:59:08.597 回答