人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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のチェックに引っかからない方法で)


●質問者: birdly
●カテゴリ:ウェブ制作
✍キーワード:HTML IE IE6 W3C クラス
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● オーイェー
●27ポイント

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

ul li { 
 float: left;
 padding: 0 10px 0 0;
 height: 70px;
}
◎質問者からの返答

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

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

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

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


2 ● elk-elg
●27ポイント

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

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

こういうのがあります。

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


3 ● オーイェー
●26ポイント

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

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;
}
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ