CSS根据容器元素计数更改子项的高度

Question

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

对于像这样的垂直液体布局，基于CSS的方法是否有任何明智的想法？

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

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

Answer 1

这是一个让你的生活更轻松的小萨斯：

$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-#类添加到父元素。

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

Answer 2

好吧，我刚刚结束使用一个表作为外部容器。动态添加的表行会自动垂直缩放布局。

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