2

我的页面布局
我似乎无法将div id="navigation"底部与图像对齐。有人可以帮我处理 CSS 吗？谢谢！

这是HTML代码：

<body>
  <div class="container">
    <div class="header"><img id="logo" src="images/logo.png" />
      <div id="navigation">
        <ul>
          <li><a href="#">Menu link 1</a></li>
      <li><a href="#">Menu link 2</a></li>
          <li><a href="#">Menu link 3</a></li>
        </ul>
      </div>
    </div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main content</div>
    <div class="footer">Footer content</div>
  </div>
</body>

和CSS：

.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: yellow;
margin: 0 auto;
}

.header {
width: 100%;
float: left;
background: orange;
}

#logo {
float: left;
display: block;
}

#navigation {
margin-left: 50px;
padding: 0px 50px 0px 0px;
float: left;
background: pink;
}

#navigation ul {
list-style-type: none;
}

#navigation li {
display: inline;
}

#navigation a {
float: left;
margin: 0px 80px 0px 0px;
}

.sidebar {
clear: both;
float: left;
width: 20%;
background: red;
}

.content {
float: left;
width: 80%;
}

.footer {
clear: both;
position: relative;
background: green;
}
4

2 回答 2

2

或者您可以将标题的高度和标题位置设置为相对，将导航设置为bottom: 0px;

.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: yellow;
margin: 0 auto;
height: 150px;
}

.header {
width: 100%;
float: left;
background: orange;
    position: relative;
}

#logo {
float: left;
display: block;
}

#navigation {
margin-left: 50px;
padding: 0px 50px 0px 0px;
float: left;
background: pink;
    position:absolute;
    bottom:0px;
}

#navigation ul {
list-style-type: none;
}

#navigation li {
display: inline;
}

#navigation a {
float: left;
margin: 0px 80px 0px 0px;
}

.sidebar {
clear: both;
float: left;
width: 20%;
background: red;
}

.content {
float: left;
width: 80%;
}

.footer {
clear: both;
position: relative;
background: green;
}​
于 2012-04-14T19:34:17.807 回答
1

为您的导航添加一些边距以将其下推到您正在寻找的级别，如下所示：

#navigation {
  margin-top:45px; /* adjust as needed */
}
于 2012-04-14T19:31:31.887 回答