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

Question

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

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

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

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

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

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

Answer 2

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

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