CSS根据容器元素计数改变孩子的高度答案

【问题标题】：CSS change height of children based on container element countCSS根据容器元素计数改变孩子的高度
【发布时间】：2012-10-25 03:08:35
【问题描述】：

我有一个容器，它有时包含三个元素，有时包含四个元素。容器的高度是恒定的。

对于这种基于 CSS 的垂直液体布局方法，有什么好的想法吗？

也就是说，孩子的身高要么是 25%，要么是 33%，但他们自己算出来了吗？（聪明的孩子。）编辑当然不一定要基于百分比...

我可以很容易地做一些基于 PHP 的事情，但更优雅的解决方案会更好。

【问题讨论】：

【解决方案1】：

这里有一个小 Sass 可以让你的生活更轻松：

$height: 200px

ul
  height: $height

@for $i from 1 through 6
  .list-#{$i} li
    height: $height/$i

你也可以直接使用 CSS：

.list-1 li {
  height: 200px;
}

.list-2 li {
  height: 100px;
}
...

使用 PHP，根据子元素的数量将 .list-# 类添加到父元素。

您也可以在纯 CSS 中使用 flexbox 完成此操作，但在您需要的浏览器中无法使用。

【讨论】：

【解决方案2】：

嗯，我刚刚使用了一张桌子作为外部容器。动态添加的表格行自动垂直缩放布局。

足够优雅，并防止任何 PHP 处理。当然，欢迎任何其他解决方案（并且可能会被接受）。

【讨论】：