16

考えているヘッダーのレイアウトをまとめるのに苦労しています。

これまでのhtmlは次のとおりです。

<div id="header">
    <img src="/img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

そしてこれまでのcss：

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;
}

.headerBg {

}

.logo {
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}

私が達成しようとしているのは、画像「headerBg.jpg」をdiv「ヘッダー」の幅100％に表示することです。したがって、本質的にはdiv自体の背景になります。次に、画像「logo.png」と div「loginBox」を「headerBg.jpg」の上に表示します。

css のように、ロゴは左端にフロートし、loginBox は右端にフロートする必要があります。

画像を削除すると、ロゴと div が正しく配置されますが、画像が導入されると、フロー内の画像の後に 2 つのフローティング アイテムが配置されます。

さまざまな追加や再構成を試みましたが、希望どおりに機能することが証明されたものはありません。

ヘッダー div の背景として css に画像を追加しましたが、そのように 100% 引き伸ばされません。

誰かがこれについていくつかの洞察を提供できますか?

また、このようなことをカバーするチュートリアルは、私のコレクションに追加するのに最適です!

ありがとうございました！

4

7 に答える 7

11 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
#header {
    position:relative;
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    position:relative;
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;

}

.headerBg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.logo {
    position:relative;
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}
    </style>
</head>
<body>
<div id="header">
    <img src="img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

</body>
</html>
于 2012-04-14T21:50:49.150 に答える
3 
.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}

これにより、画像が の幅に合わせて拡大縮小されることに注意してください<div>。水平方向にのみサイズ変更したい場合は、高さを明示的に設定する必要があります。

max-width: 100%;大きなウィンドウで画像を拡大縮小するだけの場合も試してみてください。

于 2012-04-14T22:22:30.933 に答える
0

余分な部分を表示しない div クラスを設定します。

div {
overflow: hidden;
}
于 2013-06-17T04:47:47.120 に答える
0

ヘッダーの背景画像をその div の真の背景にするだけです。Float は、 position: absolute のように他のオブジェクトを無視しません。

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
    background: url(headerBg.jpg);
}
于 2012-04-14T21:51:26.143 に答える
0

これらの設定は私にとって完璧に機能しました..すべての写真のサイズを調整します..

#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;

}

于 2015-05-04T06:45:27.703 に答える