Layout 如何使用基于容器的元素填充DIV容器'；它的实际尺寸是多少？

我在页面的某个地方有一个DIV容器，最小宽度和最小高度设置为一些值

我正在使用回调和javascript将小面板（带display:inline块的div）加载到其中

现在面板的数量是固定的，因此当用户最大化浏览器窗口时，容器的大小会增加，最后一行的末尾会出现空白

我想捕捉容器大小的变化，并加载更多的元素，尽可能多的元素，而无需剪切到容器的新空间中

我在amazon.com上看到了这个。它们的面板显示4种产品，但如果浏览器窗口最大化，相同的面板将显示更多产品，填满容器中的所有可用空间

滚动条不得出现，也不得剪切元素

是否有我可以使用的脚本或示例代码

谢谢,，

---

安德烈找到了一个很好的解决问题的办法。 代码如下：（这里使用的术语“display”的含义与超市相同）：

函数updateDisplay（）{
$（“.s2”，this.hide（）；
var x=$（“.s2”，本）；
var-prevPos=-1；
var-nrows=2；
对于（变量i=0；i

您可以在以下页面上看到它的实际作用：

---

向我们展示代码会有所帮助！子容器的大小是否固定？或者它们也是动态的？最终，浏览器将根据这些块级元素的约束大小，在容器中安装块级元素，如

div

s。那么在你的页面布局中，你指定了什么尺寸，哪些尺寸可以自行调整？我现在没有代码。但在这里，您可以看到它现在是如何工作的：您可以看到三个“显示”，我称之为包含8个元素的元素。当浏览器窗口增加时，您可以看到出现空白，我想用更多的元素（产品）填充空白，这些元素通过回调从服务器获取。Daan，子元素的宽度是固定的，高度不是固定的。

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