當其他div被添加時，標題div改變其位置

我在網頁中遇到了一些問題。它有幾頁，其中一頁有幾張大照片。在那個特定的頁面中，我發現header div向左移動了幾個像素，這在頁面之間切換時非常令人討厭。當其他div被添加時，標題div改變其位置

我知道當我刪除第一張圖片（id =「problem1」）或其中一個帶有兩張圖片的div（（id =「problem2」和「problem3」））時，問題會消失，弄清楚發生了什麼事。

我使用這個CSS代碼產生兩個colums：

.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; 

}

這是奇蹟般地改變其possition頭：

<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>

這是定義其中一個具有兩個柱的div的代碼：

<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位置是正確的，在所有沒有這些圖片的其他頁面中都是一樣的，但是當我添加第三個時，它會移動。

來源

2012-11-14 Blodwen

這是因爲你在某些頁面上有一個滾動條而在其他頁面上沒有，而你的DIV元素被設置爲'auto'，所以它們擴展了可用的瀏覽器空間（這是因爲你知道當瀏覽器被調整大小，或者在這種情況下當滾動條的存在改變可用空間時）。

爲了解決這個問題，這將是最簡單的只是設計的頁面與

html { 
overflow-y:scroll; 
}

這將確保滾動條在頁面上在任何時候，頁面尺寸就不會被它改變。

來源

2012-11-14 15:42:31 leigero

我相信問題是你在問題頁面上有一個滾動條。您的內容長於瀏覽器窗口的高度。當你的內容高於窗口時，滾動條被添加到頁面中。這是不可避免的。

來源

2012-11-14 15:24:57 bluetoft

當其他div被添加時，標題div改變其位置

回答

相關問題