javascript - 计算元素尺寸以适合容器内部

Question

我有一个固定宽度 235 像素和高度 200 像素的 ul。此 ul 由 n 个 li 填充，具体取决于查询结果。如何计算 li 的尺寸，以便它们填充 ul 内的所有可用空间。

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

Answer 1

根据 li 的数量使 ul 高度动态并应用 css display:inline-block 和 overflow: hidden 到 ul

Answer 2

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>

CSS

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

演示

---

案例二

添加height:100%到 li （它强制 li 覆盖整个可用高度）并为两者提供相同的 bg 颜色，ul & li以便看起来它已经占据了可用宽度

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

演示 2

Answer 3

如果你愿意，你可以用 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 对象都会受到影响

Answer 4

好的，这是我对代码的尝试，该代码将计算出相当高的覆盖率ul（不确定它是否实际上是最大的），考虑到lis 不需要是正方形的约束，但对于任何给定数量的项目，它们的大小必须相同.

第一部分给出了一个函数getSquare(n)，它将记住正方形的生成，这样如果你需要在一个页面上多次使用它，它就不会继续重新计算。

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

带有 throw 的线只是为了测试目的，可以删除。

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