計算元素尺寸以適應容器內部

Question

我有一個固定寬度爲235px和高度爲200px的ul。根據查詢結果，這個ul由n個li填充。我如何計算li的尺寸以便它們填充ul中的所有可用空間。

我已經嘗試過計算容器的周長，並將其與每個元素的周長總數進行比較，但這並不起作用。

Answer 1

好的，這裏是我的代碼嘗試，它會得出ul的相當高的覆蓋率（不確定它實際上是否是最大值），因爲li不必是方形的，但必須都是相同的大小任何給定數量的項目。

第一部分給出了一個函數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 }; 
} 

Answer 2

請依立的數量的UL高度動態和應用CSS顯示：inline-block的和溢出：隱藏到UL

Answer 3

完全不

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> 

爲 li提寬度

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

---

CASE 2

添加height:100%李（其力李書福灣整個可用高度），併爲這兩個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; 
} 

DEMO 2

Answer 4

如果你願意，你可以用jQuery來做到這一點。

類似：

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

的ofcourse，不要忘了給UL和ID，並傳遞到jQuery的，而不是「UL禮」這個，否則在你的頁面裏的所有對象都會受到影響