- ベストアンサー
floatで5個のdivをうまく配置したい
- HTMLのdiv要素をfloatを使って配置する際、3番目以降の要素がうまく配置できない問題が発生しています。
- 要素の高さによる配置の違いや、要素の親子関係による配置の制約が原因と考えられます。
- 配置に関する知恵やテクニックを教えていただけると幸いです。
- みんなの回答 （5）
- 専門家の回答
その他の回答 (4)
- k0021
- ベストアンサー率26% (32/120)
<body> <div style="width:xx;clear:both;"> <div class="2"> <div class="3"></div> <div class="4"></div> ５の内容</div></div> <div style="width:xx;clear:both;">説明</div> width:xxは、ページ横幅の指定です float:left;は、テキストがその周りを回り込むようにする表示です。 clear:bothを指定しないSsfari参照したプラウザ表示状態を添付します
- DrFell
- ベストアンサー率55% (305/551)
まず、間違いの訂正を <body> <div id="1"><!--idの先頭は数字は使えません--> ～～～～～～ <div><!--多分閉じたい？/抜けてます--> <div id="2"> <div id="3"></div> <div id="4"></div> <div id="5"></div> <div><!--多分閉じたい？/抜けてます--> </body> ●1と2だけなら配置できるのですが、3以降がうまく置けないのです。 1・2の親要素を意識してください。そして、3・4・5の親要素は2です。 1・2を配置できるなら3・4・5も配置できます。 大雑把に書いてみると。 ｈｔｍｌ------- <div id="a1">(1)</div> <div id="a2"> <div id="a3">(3)</div> <div id="a4">(4)</div> <div id="a5">(5)</div> </div> ｃｓｓ-------- #a1,#a2,#a3,#a4{float:left;width:50%;padding:0:margin:0;} /*上の上で、#1～#4の幅を親要素の半分として、floatしてます。*/ #a5{width:100%;clear:left;} /*a5だけは、親要素の100%としました。念のため、フロートを解除しました。*/ 実際の高さや幅、空きを当てはめて試してみてください。
- hinananana
- ベストアンサー率69% (16/23)
1と2の大きさは一緒にしてあります。 /*--CSS--*/ .wrap{ width:960px; margin:0 auto 0 auto; } .clear{ clear:both; } .box1{ width:460px; height:400px; border:solid 1px #000000; float:left; background-color:#99FFFF; } .box2{ width:460px; height:400px; border:solid 1px; float:right; background-color:#6699CC; } .box3{ width:180px; height:100px; border:solid 1px; float:left; margin:20px 0 0 30px; background-color:#FFCCFF; } .box4{ width:180px; height:100px; border:solid 1px; float:right; margin:20px 30px 0 0; background-color:#FF99CC; } .box5{ width:400px; height:200px; border:solid 1px; margin:20px auto 20px auto; background-color:#FFCC33; } /*-HTML-*/ <div class="wrap"> <div class="box1"> <br /> </div> <div class="box2"> <div class="box3"> <br /> </div> <div class="box4"> <br /> </div> <br class="clear" /> <div class="box5"> <br /> </div> </div> <br class="clear" /> </div>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ここで聞かれる方の多くが、忘れている一番はHTMLはデザインのためではないということではないかと。 そもそもスタイルシートが導入されたのは、デザインのために「文書構造」と「デザイン(プレゼンテーション)」を切り離すためです。以下の説明の前に 仕様書の、14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )を必ず読んでください。そうすると以下の説明がスムーズに理解できるでしょう。 提示されたデザインから、勝手に推測して文書構造は <body> <div class="section"><!-- 最も一般的に使われている本文に対するclass名 --> <h1>見出し</h1> <p>(1)の内容</p> </div> <div class="article"><!-- 最も一般的に使われている関連記事のclass名 --> <p>(2)の内容</p> <p class="figure main"><img (3)></p> <p class="fogure main"><img (4)></p> <p>(2)の内容</p> <p>(2)の内容</p> <div class="footer"><!-- 最も一般的に使われているfooterのclass名 --> (5)の内容 </div> </div> </div> </body> だったと仮定します。基本的にfloatは文章内で画像の周囲に記事を回りこませるためのもので、ブロックの配置に使用すると失敗します。 この場合ですとdiv.sectionを普通に横幅を決めて、absoluteで配置し。残りのdiv.articleを同じくabsoluteで右に配置します。 その中で、p.figureが挿絵のような意味合いを持つものでしたら、floatなどで配置し、最後のdiv.footerは通常(static)においておくとか・・ そのようなデザインを想定されているなら、必ずそのデザインが不自然でなく、かつ文書構造に見合ったマークアップがあるはずです。そうしたら自然にCSSは書けますし、将来、配置を根本的に変える--(3)を(1)の左に(4)を右に、その中間に(1)と(2)、(5)が縦に並ぶとか・・ 大事なことは、HTMLを正しく文書解析木にしたがってマークアップすること。そのためのHTMLないしCSSです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より
