3

私がやりたいことは次のとおりです。ウェブサイトの上部にバナーを配置し、全体に広げます。左がメニュー、右がロゴ画像です。メニューは左にフロートし、画像は右にフロートします。

問題は、ブラウザ ウィンドウのサイズ変更です。画像は右に浮いているため、ウィンドウが小さくなると正しく動きます。ただし、ある時点で、メニューに浮かび始めます。 これは、2 つのフローティング イメージを使用してこの効果を示す Fiddle です。ブラウザー ウィンドウのサイズを変更して、2 つの画像がどのように重なっているかを確認します。

設定

body {
  min-width: 800px;
}

これで、ブラウザ ウィンドウが特定の最小幅に達したときにスクロールバーが表示されるようになりました。ただし、ブラウザー ウィンドウが小さくなり続けているため、右側のフローティング イメージが動き続けることは妨げられません。変更しようとしましposition: relativeたが、うまくいきませんでした。ブラウザ ウィンドウが表示されたら、Javascript を使用して画像を固定しようとしましmin-widthたが、影響はないようです。DIV で使用min-widthし、画像を DIV の子にすることも機能しませんでした。

私の質問は次のとおりです。特定のウィンドウ サイズから始めて、左フローティング メニューにフローティングする代わりに、右フローティング イメージを配置したままにするにはどうすればよいですか?

編集: おっと、かなり重要な詳細について言及するのを忘れていました: 上部のメニュー バーは固定する必要があります。そのposition: fixedため、このプロパティを DIV に使用しました。他のページのコンテンツは、そのメニューの下でウィンドウの外にスクロールすることになっています。ntgCleaner の回答に基づいて変更されたフィドルを参照してください。このような-全体が変わりますよね！申し訳ありません...

ありがとう！

4

4 に答える 4

1

これはあなたが求めているものですか？http://jsfiddle.net/9wNEx/10/

position: fixed正しく使用していません。固定とは、「ビューポートまたはブラウザウィンドウに対して相対的に配置される」ことを意味し、まさにそれがあなたが経験していることです。

画像からを削除しposition: fixed、div内に配置しました。これにより、固定されたままのdiv内にあるため、常にページの上部に表示されます。

また、あなたの例を再現するために、他のスタイルのいくつかを微調整しました。頭の固定された高さを削除し、パッドの底に置き換えたことに注意してください。このように、画面サイズが小さくなり、画像が互いに下に押し付けられると、高さはコンテンツに追従します。

cssは次のようになります。

#banner {
    left: 0px;
    top: 0px;
    width: 100%;
    padding-bottom: 15px;
    background-color: lightblue;
    z-index: 1;
    position: fixed;
    opacity: 0.8;
}

#left {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    height: 40px;
}

#right {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    height: 40px;
}
于 2012-12-11T23:25:00.883 に答える
1

私が変更したいくつかのこと：

  1. バナー DIV を単なるフリー フローティング div ではなくコンテナにしました。おそらく必要ありません。
  2. そのバナー div に min-width:280px を指定し、overflow:hidden; にしました。

  3. 画像を相対的または絶対的に配置するのではなく、左右にフロートさせました (現在は div コンテナーにあるため)。

    #banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}

#left {
float:left;
margin:5px;
height:40px;
}

#right {
float:right;
margin:5px;
height:40px;
}

    </p>

これがフィドルです

編集された質問のために編集されました：

ヘッダーの下のすべてのコンテンツを div に配置し、その div に固定 div の高さの上マージンを与えるだけです。このケースでは、60px です。

これを HTML に追加します

<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>

次に、これをCSSに追加します

#content {
    margin:60px 0px 0px 0px;
}​

これが新しいフィドルです

于 2012-12-11T23:31:54.840 に答える
0

あなたのフィドルを見ると、あなたの問題はフロートではないと思います。 position:fixedfloat に取って代わります。これらの 2 つの要素はまったく浮いておらず、固定位置 (絶対位置に似ています) にあるため、十分なスペースがない場合に重なっています。

float:leftとを取り出してfloat:rightも結果は同じです。また、top、left、bottom、およびは、right配置されていない要素では機能しません。したがって、それらはバナーには不要です。

ただし、フロートを使用すると、十分なスペースがない場合、右の画像が左の下に折り返されます。http://codepen.io/morewry/pen/rjCGdを参照してください。画像の高さが jsfiddle テスト用にのみ設定されていると仮定すると、必要なのは次のとおりです。

.banner {
    padding: 5px; /* don't repeat padding unnecessarily */
    min-width: ??; /* to keep floats from wrapping, set one */
    overflow: hidden; /* clearfix */
}

.right { float: right; } /* only need one float, don't over-complicate it with two */
于 2012-12-11T23:27:36.843 に答える
0

<img>バナー内にタグを配置するように HTML を変更し、最小幅を に追加しまし#bannerたposition: fixed。ページ全体の最小幅が必要な場合は、他のすべての要素をラップする または コンテナに追加min-widthする必要があります。body

http://jsfiddle.net/Wexcode/s8bQL/

<div id="banner">
    <img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
    <img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>

#banner {
    width: 100%;
    min-width: 800px;
    height: 60px;
    background-color: lightblue;
    z-index: 1;
    position: fixed;
    opacity: 0.8; }

#left {
    float: left;
    margin: 5px 0 0 10px;
    height: 40px; }
#right {
    float: right;
    margin: 5px 10px 0 0;
    height: 40px; }

</p>

于 2012-12-13T08:06:02.073 に答える