CSS：2列、バランスのとれた高さ、左側の列が優先

Question

私は映画の注文リストを持っています。各ムービーには名前と説明があります。説明の長さは異なります。私は映画を次のように2列に1つずつリストアップしています：

 
1. Blues Brothers      | 4. Lord of the Rings 
    Cheesy movie about two guys.  |  A hobbit and his buddies go 
             |  to destroy some ring. 
2. Jurassic Park.      | 
    Some guy makes dinosaurs and some | 5. Can't Think Of Any More 
    chick uses 3D UNIX!     |  Lorem ipsum dolor sit amet. 
             |  Dolor sit amet lorem ipsum!!! 
3. Wayne's World      | 
    Party movie deluxe!     | 6. This Is The Last 
             |  Now we're not balanced! 
             |  Pretty messed up. 

上記のように、今日の様子を知ることができます。私は現在、映画のリストを取り、それを半分に分割し、それぞれの半分を順番にレンダリングし、その半分を互いに隣り合わせに浮かべることで、これを達成しています。

ただし、問題があります。右の列の映画のすべての記述が、左の列の説明より長い場合を想像してください。それから、高さのバランスが消えてしまいます！

このようなことをバランスさせるJavaScript以外の方法がありますか？もしそうなら、それをサポートするブラウザはどれですか？

Answer 1

コンテンツをオーバーフローさせるプログラム以外の唯一の方法は、CSS3のドラフトステータスです。 CSS2.1の新しい列にコンテンツを流す信頼できる方法はありません。

コンテンツをオーバーフローする案セレクタについては、以下のリンクを参照してください：

http://www.w3.org/TR/css3-multicol/

Answer 2

あなたはそうしていますが、列divのコンテナの中心を下にして、繰り返しの背景イメージを使用してください。私はこの技術が "faux columns"と信じています。