- ベストアンサー
CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
・添付画像のBOX-1にあたるスタイルがありませんが？それとも、BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか？ ・#box-567に相当するマークアップがありませんが？それとも、#box-5、#box-6、#box-7は#box-567の子要素に対するスタイルとして考えてますか？であればマークアップ部分は （省略） <div id="box-567"> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> </div> （省略） とならねばなりませんん。 ・box-2は幅800pxで1カラムの描画ですからfloatは不要です。 それから、各カラムの高さが全て決め打ちになっていますが、中に入る要素はその高さを超える心配のないもの（画像）ですか？ ＃高さをはみ出した場合を考慮しなくても良いものですか、という事です。
その他の回答 (2)
#containerがフローとしていない場合。 box1:clear-both box2:clear-both box8:clear-both box3:float-left box4:float-right box5:float-left bos6:float-left box7:float-right くらいでもいけます ただし、罫線の横線は <div></div>を挿入してボーダーで代用してください。 簡単でしょ？
お礼
お返事ありがとうございます。 そんな簡単なものでも良いんですね。 もっとCSSの勉強をしようと思います。
- abril
- ベストアンサー率69% (388/560)
No.1です。 > box1は書かなくて良いのかと思っていました・・・ いえ、先の回答で「BOX-1とは、<div id="container">直下に置き<div id="box-2">の前で終わる要素の事ですか？」とおたずねした通り、”そうであれば（#box-1として#containerとは違う新たなスタイル（幅だけでなくボーダーや背景色など）を与えたいのでなければ）”、わざわざbox-1というコンテナを作る必要はありません。 ＃対になるスタイルが見あたらなかったので、確認の為その様にお聞きしただけです。
お礼
お返事ありがとうございます。 もっとCSSの勉強をしたいと思います。
お礼
お返事ありがとうございます。 <div id="box-567"> （省略） </div> は記入ミスです。 box1は書かなくて良いのかと思っていました・・・ では、CSSを #box-1 { width: 800px; } #box-2 { width: 800px; height: 30px; } （下省略） にしてHTMLを <body> <div id="container"> <div id="box-1">box-1</div> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-567"> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> </div> <div id="box-8">box-8</div> </div> </body> をこうすれば大丈夫ですか？ カラムはbox-5.6.7以外は画像で決め打ちです。 5.6.7の部分は高さを超えた時を考えたほうがよさそうですね。