Javascript 计算元件尺寸，以适合容器内部

我有一个ul，固定宽度235px，高度200px。根据查询结果，此ul由n个li填充。我如何计算li的尺寸，以便它们填充ul内的所有可用空间

---

我已尝试计算容器的周长，并将其与每个元素周长的总和进行比较，但这不起作用。

根据li数使ul高度动态，并应用css显示：内联块和溢出：隐藏到ul

根据li数使ul高度动态，并应用css显示：内联块和溢出溢出：隐藏到ul

根本不提及

li

的宽度

HTML

<div class="wrap">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
    </ul>
</div>

---

案例2

将

height:100%

添加到li（强制li覆盖整个可用高度），并为两个

ul&li提供相同的bg颜色，使其看起来像是占用了可用宽度

html,body{height:100%}
ul{
   background:red; 
   margin:0; padding:0; 
   width:235px;
   height:200px;
}
li{
    display:inline-block;   height:100%;
    margin-right:2px;
    background:green;
    border-right:solid black green; 
}

请不要提及
li
的宽度

HTML

<div class="wrap">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
    </ul>
</div>



案例2

将
height:100%
添加到li（强制li覆盖整个可用高度），并为两个
ul&li提供相同的bg颜色，使其看起来像是占用了可用宽度

html,body{height:100%}
ul{
   background:red; 
   margin:0; padding:0; 
   width:235px;
   height:200px;
}
li{
    display:inline-block;   height:100%;
    margin-right:2px;
    background:green;
    border-right:solid black green; 
}

如果愿意，您可以使用jQuery执行此操作

比如：

$(document).ready(function(){
   var liCount = parseInt($('ul li').length());
   var height = parseInt($('ul').height();
   var liHeight = height / liCount;
   $('ul li').css('height', liHeight);
});

当然，不要忘记给出ul和ID，并将其传递到jQuery而不是“ul li”，否则页面中的所有li对象都会受到影响
如果愿意，可以使用jQuery执行此操作

比如：

$(document).ready(function(){
   var liCount = parseInt($('ul li').length());
   var height = parseInt($('ul').height();
   var liHeight = height / liCount;
   $('ul li').css('height', liHeight);
});

当然，不要忘记给出ul和ID，并将其传递到jQuery而不是“ul-li”，否则页面中的所有li对象都会受到影响，给定约束条件，
li
s不必是正方形，但对于任何给定数量的项目，其大小必须相同

第一部分给出了一个函数
getSquare（n）
，该函数将记录正方形的生成，因此如果您需要在一个页面上多次使用它，它将不会继续重新计算

第二部分是进行计算的函数。将项目数、容器的宽度和高度传递给它，它将返回一个具有项目宽度和高度属性的对象。它不能确保整数结果

带掷球的线仅用于测试目的，实际上，可以移除

var getSquare = (function()
{
    var squares = [];
    return function(n)
    {
        if (!squares[n])
        {
            squares[n] = Math.pow(n, 2);
        }
        return squares[n];
    };
})();


function calcItemDimensions(itemCount, areaWidth, areaHeight)
{
    var x, y, slots,
        n = 0,
        sq = 0;

    while (itemCount > sq)
    {
        n += 1;
        sq = getSquare(n);
    }

    x = y = n;
    slots = sq;

    while (slots - itemCount >= x)
    {
        if (x === y) { y -= 1; }
        else { x = y; }
        slots = x * y;
        if (slots < itemCount) { throw new Error('slots < itemCount: ' + slots + ' < ' + itemCount); }
    }

    return { width: areaWidth / x, height: areaHeight / y };
}

var getSquare=（函数（）
{
var平方=[]；
返回函数（n）
{
如果（！平方[n]）
{
平方[n]=数学功率（n，2）；
}
返回方块[n]；
};
})();
功能尺寸（项目计数、区域宽度、区域高度）
{
变量x，y，插槽，
n=0，
sq=0；
while（itemCount>sq）
{
n+=1；
sq=getSquare（n）；
}
x=y=n；
插槽=平方英尺；
而（插槽-项目计数>=x）
{
如果（x==y）{y-=1；}
else{x=y；}
槽=x*y；
if（slots
好的，鉴于
li
s不需要是正方形，但对于任何给定数量的项目都必须是相同大小的限制条件，我在这里尝试的代码将相当高地覆盖
ul
（不确定它是否是最大的）

第一部分给出了一个函数
getSquare（n）
，该函数将记录正方形的生成，因此如果您需要在一个页面上多次使用它，它将不会继续重新计算

第二部分是进行计算的函数。将项目数、容器的宽度和高度传递给它，它将返回一个具有项目宽度和高度属性的对象。它不能确保整数结果

带掷球的线仅用于测试目的，实际上，可以移除

var getSquare = (function()
{
    var squares = [];
    return function(n)
    {
        if (!squares[n])
        {
            squares[n] = Math.pow(n, 2);
        }
        return squares[n];
    };
})();


function calcItemDimensions(itemCount, areaWidth, areaHeight)
{
    var x, y, slots,
        n = 0,
        sq = 0;

    while (itemCount > sq)
    {
        n += 1;
        sq = getSquare(n);
    }

    x = y = n;
    slots = sq;

    while (slots - itemCount >= x)
    {
        if (x === y) { y -= 1; }
        else { x = y; }
        slots = x * y;
        if (slots < itemCount) { throw new Error('slots < itemCount: ' + slots + ' < ' + itemCount); }
    }

    return { width: areaWidth / x, height: areaHeight / y };
}

var getSquare=（函数（）
{
var平方=[]；
返回函数（n）
{
如果（！平方[n]）
{
平方[n]=数学功率（n，2）；
}
返回方块[n]；
};
})();
功能尺寸（项目计数、区域宽度、区域高度）
{
变量x，y，插槽，
n=0，
sq=0；
while（itemCount>sq）
{
n+=1；
sq=getSquare（n）；
}
x=y=n；
插槽=平方英尺；
而（插槽-项目计数>=x）
{
如果（x==y）{y-=1；}
else{x=y；}
槽=x*y；
if（slots
我不能这样做，我希望li居住区适合可用的固定高度和宽度我不能这样做，我希望li居住区适合可用的固定高度和宽度ul是包装，我需要li获得最大可用高度和宽度，以便所有li都可以安装在ul@FlorianShena你是说宽度：235px是ul的？？是的也帮不上忙。如您的示例所示，我需要的是li采用网格样式。ul是包装器，我需要li采用最大可用高度和宽度，以便所有的li都可以装入网格ul@FlorianShena你是说宽度：235px是ul的？？这也没用。正如你的例子所示，我需要的是li的网格样式。不，试过了，不起作用，元素没有填满所有的容器，它们变得太小了。不，试过了，不起作用，元素没有填满所有的容器，它们变得太小了。所有的li元素必须是相同的尺寸吗？是的，它们的尺寸必须相同