- 締切済み
floatでボックスを並べる
横幅300px、縦幅100pxの親ボックス"example"に、 １辺がそれぞれ100px（正方形）の（子）ボックスを”float”を使って４つ並べます。 子ボックス（ｐ、パラグラフを使います）のクラス名は、（a）、（b）,（c）（d）です。 並べ方は、左端上に（a）を、右端上に(b)を、左端下に(c),右端下に(d)の配置です。 中央は100px開くことになります。 HTMLはこんなもので。 <div class="example"> <p class="a">aボックスです。</p> <p class="b">bボックスです。</p> <p class="c">cボックスです。</p> <p class="d">dボックスです。</p> </div> floatを使い配置したいのですが、どうも(d)あたりが怪しいのです。 どなたかCSSの”正しい” コードをアドバイスいただければありがたいのですが。 また、その子ボックスに対して、用いるfloatプロパティの理由等もお教え願えればと思います。 よろしくお願いいたします。
- kyusama
- お礼率0% (0/2)
- その他(ソフトウェア)
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- tamackochi
- ベストアンサー率52% (11/21)
cとdが下の隅に行かないのは、floatはそれを指定しないからですよね。 floatは単に、要素をどちらかに寄せて、 そのあとの要素をどちらに回り込ませるか、を、指定するものですから。 位置を見た目で指定したいときは、topとかbottomとかを使うんじゃないでしょうか。 div.example { background:cyan; width:300px; height:300px; position:relative; } p { width:100px; height:100px; margin:0px; position:absolute; } p.a { background:red; top:0px; left:0px; } p.b { background:blue; top:0px; right:0px; } p.c { background:yellow; bottom:0px; left:0px; } p.d { background:green; bottom:0px; right:0px; }
- tamackochi
- ベストアンサー率52% (11/21)
div.example { background:cyan; width:300px; height:100px; } p { width:100px; height:100px; margin:0px; } p.a { background:red; float:left; } p.b { background:blue; float:right; } p.c { background:yellow; clear:right; float:left; } p.d { background:green; float:right; } こういうことですか？ 親の縦と子の縦が同じだからはみでますけど……？ dがあやしいとはどういうことなんでしょうか。
補足
tamackochiさん、 アドバイスありがとうございます。 親ボックスの 縦幅は300pxの間違いでした。すいません。 ※また、子ボックスに対して、親ボックスが300pxとしてありますのは、単純（左、右）にフロート させて、親ボックスの幅、高さを利用して並べるのではなく、”float”の指示のみにおいて思いのままに配置させたいためです。 意図している並びかたは、 左最上（隅）、右最上（隅）、左最下（隅）、右最下（隅）に子ボックスを配置です。 tamackochiさんのアドバイスですと、 その様に配置されないのですが。 何処がおかしいのでしょうか。 アドバイスをいただければありがたいのですが。 よろしくお願いいたします。 ”dがあやしい”のは私のやり方ですと、”d”だけが意図しないところに配置されてしまう と言う意味ですので、あまり意味はありません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> div.example { background:cyan; width:300px; height:300px; } p { width:100px; height:100px; margin:0px; } p.a { background:red; float:left; } p.b { background:blue; float:right; } p.c { background:yellow; clear:right; float:left; } p.d { background:green; float:right; } </style> </head> <body> <div class="example"> <p class="a">aボックスです。</p> <p class="b">bボックスです。</p> <p class="c">cボックスです。</p> <p class="d">dボックスです。</p> </div> </div> </body> </html>