使用CSS均勻分佈子元素的高度

假設您需要向用戶呈現顏色列表。顏色必須以固定的高度顯示在列表中，每種顏色佔據該高度的相等部分。使用CSS均勻分佈子元素的高度

這是它應該是什麼樣子四種顏色，90個像素的名單高度和粗邊框：

Firefox

上面的圖像是在Firefox 3.6.13從後續源渲染：

<ul style="height: 90px; border: 5px solid black; padding: 0;"> 
    <li style="height: 25%; background: red;"> 
    <li style="height: 25%; background: blue;"> 
    <li style="height: 25%; background: yellow;"> 
    <li style="height: 25%; background: green;"> 
</ul>

這沒關係。該列表的確是90像素高 - 在邊界內 - 每種顏色都可以在這個空間中看到（看起來）平等的份額。現在，讓我們來呈現相同的HTML/CSS在Safari或Chrome：

Chrome

注意綠色行和邊界之間的窄的白色行。對於我們在這裏看到的內容，有一個非常簡單的解釋：0.25 × 90 = 22.5

Safari和Chrome瀏覽器中的WebKit並不真正喜歡非整數像素高度並丟棄小數。在四行高度爲22的情況下，我們在列表底部得到2個像素：90 - 4 × 22 = 2

在靜態HTML文件的上下文中，我們可以很容易地將元素的高度設置爲23,22,23,23像素，這個列表在任何瀏覽器中都會顯示出來。另一方面，如果從數據庫加載顏色並且計數隨着每個請求而變化，則需要更靈活的解決方案。

我知道如何解決這個問題，通過使用Javascript計算並在每行上設置一個整數值高度onload，如果沒有其他顯示，我會發布此解決方案。然而，我會選擇純粹的基於CSS的解決方案來解決這個問題。你能想到一個嗎？

來源

2011-02-25 Jørn Schou-Rode

你可以考慮作弊和'ul'的背景色設置爲最後的顏色'li'。 – thirtydot 2011-02-25 09:42:41

[約翰Resig在這個問題上。]（http://ejohn.org/blog/sub-pixel-problems-in-css/） – thirtydot 2011-02-25 09:47:32

@th好吧，這將看起來好幾行。隨着行數越來越多，累積間隔可能會增長到高於單行的高度。在這種情況下，「延長」最後一行看起來很奇怪。 – 2011-02-25 09:49:24

-2

嘗試刪除<li>標記之間的所有終止符。例如。

<ul><li></li><li></li></ul>

有時候，這是一個問題，但在你的情況我不知道，這將幫助;）只要給一試;）

來源

2011-02-25 09:44:42

對不起，但在這種情況下，這不是問題，你正在考慮'display：inline-block'（不是我的downvote） – thirtydot 2011-02-25 09:46:32

正如所承諾的，這裏是一個Javascript解決問題。我對一個簡單的基於CSS的解決方案仍然很感興趣，但同時，這個答案可能會幫助其他人完成他們的工作。

腳本要求在入境點聲明兩個變量：list應指向容器的DOM元素（例如<ul>），並items項在此列表中的集合（如<li>）。

這個想法是動態地設置每個項目的像素高度，以確保高度總和等於容器高度，同時只允許項目之間高度的最小偏差。我們通過遍歷項目來實現這一點，通過簡單地將剩餘可用空間與剩餘項目的數量相除來計算每個項目的整體高度，以設置明確的高度。

var spaceRemaining = list.clientHeight; 
var itemsRemaining = items.length; 

while (itemsRemaining > 0) { 
    var itemHeight = Math.round(spaceRemaining/itemsRemaining); 
    items[itemsRemaining - 1].style.height = itemHeight; 
    spaceRemaining -= itemHeight; 
    itemsRemaining -= 1; 
}

在過去的可讀性那些有利於簡潔，這裏有非常相同的腳本的一個較短的版本：

for (var space = list.clientHeight, i = items.length; i; i--) { 
    space -= items[i-1].style.height = Math.round(space/i); 
}

來源

2011-02-25 12:46:00

+1，對我來說很好看，也許會創建一個[jsFiddle]/http://jsfiddle.net/ ）示範？ – thirtydot 2011-02-25 14:46:08

使用CSS均勻分佈子元素的高度

回答

相關問題