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

Question

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

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

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

我可以很容易地做一些基于 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 中完成此操作，但它在您需要的浏览器中不起作用。