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 に答える