0

以下は、単純なページのコードです。私は（A）上部にロゴ、その右側にヘッダー、そして「サインイン/登録」リンクで構成されるバナーを配置しようとしています。（B）これらすべての下に、メインテキストがありますサイト。

上部の本文とバナーの間隔を大きくあけてほしい。そのため、ページを div で分割します。しかし、#main に「margin-top」を適用してバナーを一定の距離に保つと、すべて、つまりメイン テキストとバナー内のすべてがページの下に移動します。ヘッダー要素に「margin-bottom」を適用すると、同じことが起こります。

私は CSS と HTML に慣れていませんが、これまではコツがありました。私はこれについて長い間頭を悩ませてきましたが、ここでの位置付けがまったく理解できないようです!

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <meta charset="utf-8"/>
  <title>My Page</title>
</head>

<body>
<header id="masthead" role="banner">
  <img src="jep.jpeg" alt="My Page">
  <h2>Welcome!</h2>
  <p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p>
</header>

<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>

CSSコードは次のとおりです。

#masthead {
position: relative;
}

#masthead img {
position: absolute;
}

#masthead h2 {
position: absolute;
left: 150px;
}

#masthead p {
position: absolute;
right: 10px;
}

#main {
margin-top: 40px;
}
4

3 に答える 3

1

問題は、すべてのabsolute配置によって要素がドキュメント フローから削除されることです。つまり、ヘッダーの高さは 0px ですが、すべてがヘッダーに対して相対的に配置されます。

マストヘッドに高さを与えるだけです。

JSFiddle

于 2013-03-07T21:02:36.453 に答える
0

要素を独自のコンテナにラップするだけで、要素をより適切に配置できます。おそらく、これにもいくつかの高さを定義したいと思うでしょう。高さを含む#masthead

レスポンシブ デザインが必要であると仮定します。

<header id="masthead" role="banner">
  <section class="logo">
    <img src="jep.jpeg" alt="My Page">
  </section>

  <section class="title">
    <h2>Journal of Electronic Publishing</h2>
  </section>

  <section class="sign-in">
    <a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a>
  </section>
</header>

.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}

合計 100% は、その計算にマージンを含めると仮定していることに注意してください。したがって、30+30 = 60 + 5 + 5 = 70 + 30 = 100%

編集: CSS を確認できたので、具体的な問題は position:absolute; の使用です。これらを削除すると、正しいパスに沿って進むはずです。

于 2013-03-07T20:39:28.300 に答える