html - コンテナ要素数に基づいて子の CSS 変更高さ

Question

私は時々 3 つ、時には 4 つの要素を持つコンテナーを持っています。コンテナの高さは一定です。

ここに画像の説明を入力

このような垂直リキッドレイアウトのための CSS ベースの方法について、何か素晴らしいアイデアはありますか?

つまり、子供たちの身長は 25% か 33% のどちらかですが、それは自分で判断できるのでしょうか? （賢い子供たち。） 編集もちろん、必ずしもパーセンテージベースである必要はありません...

私は PHP ベースのことをかなり簡単に行うことができますが、より洗練されたソリューションがあればよいでしょう。

score 1 · Accepted Answer

Here is a little Sass to make your life easier:

$height: 200px

ul
  height: $height

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

You can also do it with straight CSS:

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

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

With PHP, add the .list-# class to the parent element based on how many children there are.

You could also accomplish this in pure CSS with flexbox, but it will not work in the browsers you require.

score 0 · Accepted Answer

さて、私はテーブルを外側のコンテナとして使用することになりました。動的に追加された表の行は、レイアウトを自動的に垂直方向にスケーリングします。

十分にエレガントで、PHP 処理を防ぎます。もちろん、他のソリューションも歓迎します（そして、受け入れられるかもしれません）。

2 に答える 2