CSS圖像自動換行問題 - 取決於瀏覽器的縮放級別

我一直在這一整天都在打我的腦袋，並且正在向所有人求助。CSS圖像自動換行問題 - 取決於瀏覽器的縮放級別

我試圖創建一個跨5個圖像的面板，其中一個jQuery的動畫（）擴展每個圖像連續，直到所有5個圖像消耗其容器的寬度的100％.. 沒有包裝。

這裏是鏈接的問題：

https://www.avantalytics.com/

初始blockUI顯示細，但一旦其到期和正常顯示的網頁，相同的五個圖像將根據一些分辨率完美顯示（我使用ctrl - +/- 在FF或IE中進行測試）以及其他引起最後一個圖像的換行。

動畫調整大小的代碼位於下方，其目的是將每個圖像的大小調整爲容器寬度的20％。我試圖看看它是否與舍入有關，並且已經空了。我看了一下CSS選項，嘗試以下一些/所有內容：

overflow:hidden; 
white-space: nowrap; 
display:inline-block; 




$(".service_img").each(function (i) 
    { 
    // if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit 
    if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){ 
     $('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5))); 
    } 
    else { 
     $('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false}); 
     //$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false}); 
     $('#'+this.id).show(); 
    } 

    })

任何幫助，非常感謝。

來源

2012-10-04 Ross

你可以寫在調整大小後的功能，並檢查是否#services_imgs_container兩倍div.service_img的高度：EQ（0）。如果它將每個.service_img的大小一次減少一個像素，直到該語句不再爲真。

像這樣

while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5)) 
{ 
    $('.service_img').css('width': '-=1'); 
}

來源

2012-10-04 23:47:04 user1289347

寬度的問題，而是你的建議仍然有效 - 讓我嘗試一下，看看它是如何去。謝謝。 – Ross

對，我檢查身高的原因是，如果遏制器的高度是兒童身高的兩倍，那麼我們知道它將顯示兩行中的孩子，而不是一行。所以如果它在兩行上，我減少每個元素直到它跳回到一行，在這種情況下，容器的高度也會改變。 – user1289347

啊......好主意......我會試試這個，讓你知道。 Thx – Ross

CSS圖像自動換行問題 - 取決於瀏覽器的縮放級別

回答

相關問題