floatした異なる高さのブロックは、配置がガチャガチャになる
CSSで floatさせたブロックレベル要素の高さが異なる場合、ちょっと困ったことが起きます。さて、どうしたものか？調べてみました。
まず、どういうお話なのか、簡単にご説明します。例えば、divなどのブロックレベルを、次のように float:left;しているとします。中の文字列がすべて同じくらいの長さであれば、特に問題はないのです。
しかし例えば、二番目の文字列（石楠花）が、他の文字列より長いと、float:left;している五番目のブロック（椿）が突っかかってしまいます。変な配置になります。
期待している配置は、次のような感じではないでしょうか。
それで、てっきり CSSで出来ると思っていたんですが、どうにも方法が見つかりませんでした。例えば、Clearfixですが、これは外側のブロックレベルの高さを調整してくれますが、中にあるブロックレベルの高さなんかには関係ないみたいです。
あとは、heightとか、min-heightとかも、試してみましたが、良い結果を得られませんでした。何か方法があるのかもしれませんけれど、たどり着けませんでした。
JavaScript「heightLine.js」の利用
そこで登場するのが、「heightLine.js」という JavaScriptライブラリです。
to-Rさんの記事『ブロックレベル要素の高さを揃えるheightLine.js』にて、公開していらっしゃいます。ありがたい。
使い方は、先の記事に書いてあるので割愛します。おそらく、「使い方3」が一番分かり良いのではないかしら。簡単です。
ちなみに、liタグ、dt（dd）タグなどを floatしている場合は、ブロックレベル要素ではないのでダメみたいです。「display: block;」も試してみましたが、ダメみたいです。（たぶん）
追記
JavaScriptでは、重くて現実的ではありません。行ごとにulタグを区切ってしまう方が良さそうです。
Kumacrowさんおはようございます！！！
これ凄い～
私ついこの前、これで悩んでいて、結局、上段と下段を分けてdivで括りました。
to-RさんのJavaScript「heightLine.js」の利用、今後とても役立つと思います！！！
ありがとうございました♪とても参考になりました＾＾
ichimarugo - いちまるごさん、こんちあ。
そう、すごいよね。
JavaScriptで高さを算出して、
うまいことやってくれているんでしょうね。
しかし、CSSで出来たらいいのになぁ～って思うよ。
本来のfloatの使い方じゃないから、
しょうがないのでしょうけれども。(´Д｀;)
参考になって良かったッス。
それでは、またー(*´∀`)人(´∀｀*)