Question

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

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

Answer 1

根据li的数量使ul高度动态并应用css显示：inline-block和overflow：hidden to 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; 
}

<强> DEMO

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

<强> DEMO 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不需要是方形的约束，这是我对代码的尝试，它会计算li的相当高的覆盖率（不确定它是否实际上是最大的）但对于任何给定数量的物品，所有物品的大小必须相同。

第一部分给出了一个函数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 };
}

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

4 个答案: