使用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均匀分布子元素的高度

回答

相关问题