よくわかっていないのですが差し上げるポイントとして1000ポイント用意しました。
はじめての質問なので不備がありましたらお教えいただけますと幸いです。
リスト要素をフロートで並べ、1つ目、5つ目(、9つ目、13個目)のリストに"clear:both"を指定することで改行させたいと考えています。
詳細は下記をご覧いただけますでしょうか。
1.このようにしたい
http://birdly.heteml.jp/birdly/data/hatena.gif
2.実際のコード
http://birdly.heteml.jp/birdly/data/hatena.html
途中で高さの異なる要素が入ると、(1)で示したように、IEだとclearを指定した要素以後がひっかかってしまいます。
この場合、4行ごとに<div class="clearfix">で囲む。あるいは4行ごとに<br clear="all">を挟むなどすれば解消されるのですが、
今回のケースではそれを使えず、(2)のような最小限のHTMLコード+クラス指定のみで解決したいのですが何か方法はないでしょうか。
(W3Cのチェックに引っかからない方法で)
下記のように、liの高さを指定すればいけると思います。
ul li { float: left; padding: 0 10px 0 0; height: 70px; }
JavaScriptを使うのはどうでしょう?
http://blog.webcreativepark.net/2007/07/26-010338.html
こういうのがあります。
いちいちclearする必要もなくなるのでお勧めです。
再回答させていただきます。
CSSハックは使用可能ということだったので、以下CSSでIE6でも同じようなレイアウトが実現できます。
ul { padding: 0; margin: 0 auto; width: 640px; } ul li { float: left; padding: 0 10px 10px 0; _float: none; _padding: 0; _display: inline; } ul li a { _display: table; _vertical-align: top; } ul li img { _margin: 0 5px 10px 0; } ul li.first { clear:both; }
説明不足で失礼しました。
高さは可変(この例の場合画像の高さは決まっていない=更新毎に随時変化する)でなければならないのです。
高さ固定で良いのであれば仰るとおりかと思います。
回答ありがとうございました。