css - 5列の行を持つ-すべて同じ高さを取る必要があります

Question

さて、これはトリッキーな質問です。このタスクにテーブルやJavaScriptを使用しないことを懸念しています。

基本的に、5列の行があり、1列は高さを拡張できる任意のタイプのコンテンツを取りますが、タスクは、兄弟列が流体コンテンツを含むその列と同じ高さになるようにすることです。

デモ： http： //jsfiddle.net/Mrg5E/

2行目にあるように、内部には高さを占める大きなコンテンツが含まれていますが、これにより兄弟の高さも壊れます。

主にテーブルまたはJavaScriptを使用して、提案された回答を調べました。これは、これを回避するために必要なものです。Holy Grailなどのハックも調べましたが、これは主に5列（場合によっては4列）の場合は2〜3列です。

すべての兄弟の高さに一致するようにCSSで可能な修正はありますか？

score 0 · Accepted Answer

プロパティを使用し、min-heightクロスブラウザソリューションについては、以下を参照してください。

score 0 · Accepted Answer

コンテンツの高さが可変の1つの列がどうなるかわからない場合は、いいえ、CSSだけでこれを行うことはできません。あなたはそれを偽造するか、javascriptを使用する必要があります。

固定幅のレイアウトを使用している場合は、フェイクコラムの手法を試すことができます。これは、縦に並べて表示される背景画像で「偽造」され、列が同じ高さであるかのように見せかけます。この記事の例では2つの列を使用していますが、5つ使用できない理由はありません。

もう1つの方法は、javascriptを使用することです。jqueryを使用している場合は、役立つプラグインがあります。基本的な考え方は、最大の列の高さを特定し、その高さを他の列に適用することです。