如何用基於容器實際大小的元素填充DIV容器？

我有一個DIV容器在頁面上的最小寬度和最小高度設置爲一些值。如何用基於容器實際大小的元素填充DIV容器？

我使用回調函數和javascript將小型面板（帶有顯示的DIV：內聯塊）加載到它中。

現在面板的數量是固定的，這樣當用戶最大化瀏覽器窗口時，容器的大小會增加，最後一行的末尾會出現空白。

我想捕捉容器的大小更改，並加載更多的元素，儘可能多地適合，而不需要剪切容器的新空間。

我在amazon.com上看到了這個。它們具有顯示4種產品的面板，但如果瀏覽器窗口最大化，相同的面板將顯示更多產品，以填充容器中的所有可用空間。

滾動條不得出現，並且不得剪裁元素。

是否有我可以使用的腳本或示例代碼？

謝謝安德烈

來源

2011-12-11 savraska

向我們展示了代碼會有所幫助！ – vdbuilder

是否固定了子容器的大小？或者它們也是動態的？ –

最終，瀏覽器將根據這些塊級元素的約束大小，在容器內適合塊級元素（如「div」）。因此，在您的頁面佈局中，您指定了哪些尺寸，並調整了自己的尺寸？ – piersadrian

找到了一個非常好的解決問題的辦法。下面的代碼：（這裏在同樣的意義在超市使用術語「顯示」）：

function updateDisplay() { 
    $(".s2", this).hide(); 
    var x = $(".s2", this); 

    var prevPos = -1; 
    var nrows = 2; 
    for (var i = 0; i < x.length; i++) { 
     $(x[i]).toggle(); 
     var curPos = $(x[i]).position().left; 
     if (curPos < prevPos) { 
      if (--nrows == 0) { 
       $(x[i]).toggle(); 
       break; 
      } 
     } 
     prevPos = curPos; 
    } 
} 

function updateDisplays() { 
    $(".dcon").each(updateDisplay); 
} 

$(window).resize(updateDisplays); 
$(document).ready(updateDisplays);

你可以看到它在行動上的以下網頁：

www.megabit-mich.ru

www.sportolimpia.ru

來源

2011-12-24 22:53:39 savraska

如何用基於容器實際大小的元素填充DIV容器？

回答

相關問題