CSSでのレイアウトについて教えてください。出来ればfloatを用いてhttp://www.fastpic.jp/images/242/4294128134.gif ←このようなレイアウトにしたいと考えています。(色のついたそれぞれのボックスはdivで作成しています)

サイトは知人に依頼されて作成しており、知人は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以外の方法があるなら教えていただけると幸いです。よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/09/03 13:34:57
  • 終了:2011/09/03 19:31:58

ベストアンサー

id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/03 15:50:07

IE6に対応しました。

http://jsfiddle.net/x3L2h/4/

インラインブロックを使用しています。

問題は、ブラウザによってブロックとブロックの間に隙間が空くことです。そのためラッパーのボックスは少し大きめにwidthを設定する必要があります。

id:slow_snow

素晴らしいです…!!これで知人にも分かりやすい構成でHTMLを記述することができます。

wrapperは大き目にですね。了解いたしました。

ポイントの手持ちがなく申し訳ございません…。

本当にありがとうございました。

2011/09/03 19:31:47

その他の回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/03 14:56:23

とりあえず、IE7+対応ということで、サンプルです。

http://jsfiddle.net/x3L2h/

問題は、ボックスの数だけCSSルールを書かなきゃいけないということです。あらかじめ「これ以上は増えないだろう」という数だけルールを書いておくしかないですね。

nth-childを使えばもっとスマートですが、そうするとIE全滅です。

 

IE6にも対応させたい場合は、お返事ください。

id:slow_snow

コメント欄で質問を下さったのにお返事が遅れてしまい申し訳ございません。

サンプル拝見しました!思った通りのレイアウトに仕上がっていて感動しました。

  1. で必要な分追加していくんですね。

ですが出来たらIE6.0にも対応させたいと考えております。

もし方法がございましたらご教授ください。

2011/09/03 15:07:10
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/09/03 15:50:07ここでベストアンサー

IE6に対応しました。

http://jsfiddle.net/x3L2h/4/

インラインブロックを使用しています。

問題は、ブラウザによってブロックとブロックの間に隙間が空くことです。そのためラッパーのボックスは少し大きめにwidthを設定する必要があります。

id:slow_snow

素晴らしいです…!!これで知人にも分かりやすい構成でHTMLを記述することができます。

wrapperは大き目にですね。了解いたしました。

ポイントの手持ちがなく申し訳ございません…。

本当にありがとうございました。

2011/09/03 19:31:47
  • id:Lhankor_Mhy
    divの入れ子は使っちゃダメ、ということですよね?
    対応させるブラウザはどれですか?
  • id:slow_snow
    なるべくなら使用したくありませんがそれしか方法がない場合は仕方ないと考えています<divの入れ子

    対応させたいブラウザはIE6.0以上、FireFox、Google Chrome、Safariです。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません