サイトは知人に依頼されて作成しており、知人はHTMLやCSSに関する知識が皆無なのですが今後の更新は知人がすることになっている為、分かりやすいようにそれぞれのdivには同一のclass名を使用したいと考えています。
また、それぞれのdivの順番が変わる可能性・新たに追加される可能性があります（この為divのclass名を同一にしたいです）。
divのheightはその時々で異なるのでheightの指定はできません。
まず、.Box {float: left; margin-bottom: 35px; width:300px;}と指定してみたのですが、floatの特性上http://www.fastpic.jp/images/164/5416812375.gif ←という風になってしまいます。
なんとかして、heightを指定せず・同一のclass名で、最初に提示したようなレイアウトを作成することはできないでしょうか？ もしfloat以外の方法があるなら教えていただけると幸いです。よろしくお願いいたします。
No.2
814
232
IE6に対応しました。
インラインブロックを使用しています。
問題は、ブラウザによってブロックとブロックの間に隙間が空くことです。そのためラッパーのボックスは少し大きめにwidthを設定する必要があります。
No.1
814232
とりあえず、IE7+対応ということで、サンプルです。
問題は、ボックスの数だけCSSルールを書かなきゃいけないということです。あらかじめ「これ以上は増えないだろう」という数だけルールを書いておくしかないですね。
nth-childを使えばもっとスマートですが、そうするとIE全滅です。
IE6にも対応させたい場合は、お返事ください。
コメント欄で質問を下さったのにお返事が遅れてしまい申し訳ございません。
サンプル拝見しました！思った通りのレイアウトに仕上がっていて感動しました。
ですが出来たらIE6.0にも対応させたいと考えております。
もし方法がございましたらご教授ください。
No.2
814232
ここでベストアンサー
IE6に対応しました。
インラインブロックを使用しています。
問題は、ブラウザによってブロックとブロックの間に隙間が空くことです。そのためラッパーのボックスは少し大きめにwidthを設定する必要があります。
素晴らしいです…！！これで知人にも分かりやすい構成でHTMLを記述することができます。
wrapperは大き目にですね。了解いたしました。
ポイントの手持ちがなく申し訳ございません…。
本当にありがとうございました。
Lhankor_Mhy
2011/09/03 14:13:01
1
0
slow_snow
2
2
1
素晴らしいです…！！これで知人にも分かりやすい構成でHTMLを記述することができます。
wrapperは大き目にですね。了解いたしました。
ポイントの手持ちがなく申し訳ございません…。
本当にありがとうございました。