IE6,7におけるfloatとclearの併用


よくわかっていないのですが差し上げるポイントとして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のチェックに引っかからない方法で)

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2010/03/04 14:55:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:OhYeah No.1

回答回数81ベストアンサー獲得回数14

ポイント27pt

下記のように、liの高さを指定すればいけると思います。

ul li { 
 float: left;
 padding: 0 10px 0 0;
  height: 70px;
}
id:birdly

説明不足で失礼しました。

高さは可変(この例の場合画像の高さは決まっていない=更新毎に随時変化する)でなければならないのです。

高さ固定で良いのであれば仰るとおりかと思います。

回答ありがとうございました。

2010/02/25 17:06:17
id:elk-elg No.2

回答回数19ベストアンサー獲得回数0

ポイント27pt

JavaScriptを使うのはどうでしょう?

http://blog.webcreativepark.net/2007/07/26-010338.html

こういうのがあります。

いちいちclearする必要もなくなるのでお勧めです。

id:OhYeah No.3

回答回数81ベストアンサー獲得回数14

ポイント26pt

再回答させていただきます。

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;
}
  • id:OhYeah
    高さが可変となると、むずかしいですね・・・
    ちなみに、画像の横幅についても可変しますか?
    また、CSSハックは使用可能ですか?
  • id:birdly
    ですよね。。
    IE8では大丈夫なようなのでバグなのかなと思っていますが、参考になるサイトも見つけられませんでした。
    横幅は固定です。(一応width指定なども簡単に試してはみたのですが)
    CSSハックはものによりますが、使用可能と考えて頂いて大丈夫です。
    Javascriptでごにょごにょするのは無しです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません