Question

我正试图让布局看起来如下所示：

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

我设法让“content”div与标题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>

如何在我制作的示例模型中对齐nav div？我想确保'nav'的左侧与标题保持对齐，'content'的右侧与标题的右侧保持对齐。

Answer 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 CSS中使用header。

Answer 2

这应该得到你之后的布局：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;
}

Answer 3

如果您正在寻找液体布局，这是一个解决方案：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宽度更改为固定宽度，如800px。根据需要调整边距。

使用标题div对齐两个div

3 个答案: