Question

layout of my page
我似乎无法将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;
}

Answer 1

或者您可以将标题的高度和标题位置设置为相对位置，以将导航设置为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;
}

Answer 2

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

#navigation {
  margin-top:45px; /* adjust as needed */
}

如何使div底部对齐？

2 个答案: