如何用基于容器实际大小的元素填充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容器？

回答

相关问题