1

Web ページのヘッダーに問題があります。いくつかのページがあり、そのうちの 1 つにいくつかの大きな写真があります。その特定のページで、ヘッダー div が数ピクセル左に移動することを確認しました。これは、ページ間で変更するときに非常に不快です。

最初の画像 (id="problem1")、または 2 つの画像 ((id="problem2" および "problem3")) を含む div の 1 つを削除すると、問題が消えることはわかっていますが、何が問題なのかわかりません。ハプニング。

この CSS コードを使用して 2 つの列を生成しています。

.contenedor { overflow: auto; }

.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}

そして、これはヘッダー用です：

#header {
    height: 100px;
    background: #0072b8;
    font-family: Arial;
    font-size: 16px;
    color: white;

}

これは、その位置を魔法のように変更するヘッダーです。

<div id="header">
        <a href="home.html"><img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;"></a>
    </div>

これは、2 つの列を持つ div の 1 つを定義するコードです。

<div class="contenedor">
    <div class="div1">
      <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>         
    </div>
    <div class="div2">
       <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>
    </div>
</div>

コードの残りの部分とその結果は、次の場所で確認できます: JSFiddle

私を最も困惑させているのは、問題のある要素を2つだけ残すと、divの位置が正しいものであり、これらの写真がない他のすべてのページと同じですが、3番目の要素を追加すると動きます。

4

2 に答える 2

2

これは、一部のページにはスクロール バーがあり、他のページにはスクロール バーがなく、DIV 要素が「auto」に設定されているため、使用可能なブラウザー スペースが拡張されているために発生しています (ブラウザーのサイズが変更されると、またはこのスクロールバーの存在によって利用可能なスペースが変わる場合)。

これを修正するには、ページをデザインするのが最も簡単です

html {
overflow-y:scroll;
}

これにより、スクロール バーが常にページ上にあり、ページ サイズが変更されないことが保証されます。

于 2012-11-14T15:42:31.163 に答える
0

問題は、問題のページにスクロール バーがあることだと思います。コンテンツがブラウザ ウィンドウの高さよりも長くなっています。コンテンツがウィンドウよりも高い場合、ページにスクロール バーが追加されます。これは避けられません。

于 2012-11-14T15:24:57.183 に答える