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

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以外の方法があるなら教えていただけると幸いです。よろしくお願いいたします。

●質問者: slow_snow
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lhankor_Mhy

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

http://jsfiddle.net/x3L2h/

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

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

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

◎質問者からの返答

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

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

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

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

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


2 ● Lhankor_Mhy
ベストアンサー

IE6に対応しました。

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

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

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

◎質問者からの返答

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

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

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

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

関連質問

●質問をもっと探す●



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