CSS li float 2列組み

写真とテキストの入った<div>をliでfloat:left指定して ■■ ■■ ■■ のように2列に表示させました。 <li> <div> 写真とテキスト </div> </li> これを繰り返す ただテキストの量によって ■■ ■ ■ ■ のように崩れてしまうことが分かりました。 何か良い方法はないでしょうか？ よろしくお願い致します。 質問者様のイメージに完全には合わないかもしれませんが、妥協案が2つあります。 下記サンプルはwidth: 500pxの領域に、左から一定の位置に上揃えで2アイテムづつ画像＋テキストのブロックを並べる、という想定です。 検証環境はIE6/7、Firefox2.0～、Opera9.25 on Windows XPのみです。 ただし、どちらの場合も質問者様のコメントにありました背景画像でボトム合わせにしたライン、というのを上記4環境で完全に同じ結果を得ること