圖片在瀏覽器窗口調整大小時隨機做一次蹦極

迄今爲止我遇到過的最神祕的問題。訪問我目前正在設計的網站：http://ftfranes.com/mliad2/圖片在瀏覽器窗口調整大小時隨機做一次蹦極

然後只需在頁面加載後重新調整瀏覽器窗口大小。您會注意到圖像會立即跳入頁面。如果我告訴你我有任何關於這是什麼原因的線索，我會撒謊，所以我轉向這裏的某個人，可能比我更聰明。

2012-04-05 Henrik Petterson

在頁面上有很多腳本，其中一個腳本可能是罪魁禍首。嘗試逐個禁用它們以找到它。 – bfavaretto 2012-04-05 13:14:48

有似乎有兩個問題容器的工作，在我看來，關於你的漂浮容器。 .sidebar-right-twitter和.projects都佔用了全部寬度，所以.projects（包含您的縮略圖）被推到.sidebar-right-twitter以下時，它們應該是並排的。

.side-bar-right { 
    float: right; 
    margin-left: 705px; /* Reduce a lot or omit entirely? */ 
    : 
} 

.projects { 
    float: left; 
    width: 940px; /* Reduce to nearer 700px */ 
    : 
}

對CSS進行這些更改似乎可以解決Chrome中的問題。（我沒有，但是，需要以使其「跳回」再次調整窗口的大小。）

編輯

小跳的第二個問題......（該H2似乎有是一個紅鯡魚/巧合。）

當調整一些腳本正在申請top:368px到#grid_clone窗口。這似乎將縮略圖容器向下推得太遠了。真正的黑客就是在CSS中的這個元素上應用margin-top:-28px;來抵消這個額外的跳躍。

我懷疑你將需要申請margin-top:-28px;這兩個元素，否則他們將無法對齊。

繼續評論...

來源

2012-04-05 13:42:17 MrWhite

是的，這固定了一切，我減少了700px的項目，並省略了側邊欄右邊緣。非常感謝你的兄弟。 – 2012-04-05 13:53:52

或者讓我重申一遍，似乎還有一個問題。如果您現在查看網站並調整大小，您會注意到它仍然會發生較小的跳躍，您是否知道造成這種情況的原因？ – 2012-04-05 13:55:01

@HenrikPetterson這第二個問題似乎是由「最新推文」'H2'造成的。我已經更新了我的答案。 – MrWhite 2012-04-05 14:09:17

ul with id grid_clone越來越頂：845px當我們調整大小時，因爲它絕對定位，它將在底部留下845px頂部。它是否使用了任何插件？

來源

2012-04-05 13:16:28

其實這是一個CSS問題。 #image-grid向左浮動以及.sidebar_right_twitter。但一個元素必須有足夠的空間來浮動。如果不是，它會跳到下一行。因此，通過調整窗口大小，div不再有足夠的空間並進入下一行。

所以，如果你想浮動彼此相鄰，您將需要一個容器元素：

<div id="myContainer"> 
    <div class="floatLeft"> 
    </div> 
    <div class="floatRight"> 
    </div> 
</div>

確保爲浮動div的寬度，其建議立即進行刪除不超過給定的空間。

來源

2012-04-05 13:16:59 SamiSalami

我試過這個解決方案，但不幸的是它沒有工作。 – 2012-04-05 13:41:10

重新安排您的內容結構，您需要將<ul>放在右側欄的div上方。它們都設置爲向左浮動，所以您會希望左側的元素成爲第一個元素。

編輯*

您的網格顯示在一個無序列表 - 這是該邊欄包含在<div>標籤後創建<ul>我相信，取出提到的定位碼的組合和不當的花車將修復你的問題。根據腳本分配的位置，很可能<ul>甚至不需要浮點數。

玩的螢火蟲，你可能會在第一次耐，但它是一個必須有任何人使用HTML和CSS

來源

2012-04-05 13:18:46 RyanS

您能否詳細說明您的答案？ – 2012-04-05 13:21:59

必須！ https://getfirebug.com/downloads/ – RyanS 2012-04-05 13:27:59

圖片在瀏覽器窗口調整大小時隨機做一次蹦極

回答

相關問題