- 締切済み
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があやしいとはどういうことなんでしょうか。
関連するQ&A
- CSS floatによるレイアウト
box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか？
- ベストアンサー
- CSS
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
- floatすると親ボックスからはみでる
文字を写真（もしくは文字のボックス）に周りこませ、それを外のボックスの罫で囲みたいと思っているのですが、文字が短く、写真が長いと写真部分のボックスが外のボックスからはみ出てしまします。（文章が長いとうまくいくのですが。。）長いほうにあわせて外枠で囲める方法はないでしょうか？ よろしくお願いします。 <style type="text/css"> <!-- /*枠*/ .waku{ border: 2px #ffdddd solid; } .right{ width: 132px; float: right; background:#CCFFCC; } --> </style> <DIV class="waku"> <DIV class="right"> test<br>test </div> test </DIV>
- ベストアンサー
- HTML
- floatのクリアについて
以下のように「test1」,「test2」というclassを「test」の中で左右に 配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを 解除することが出来ません。（IEの７では解除できましたが、FireFoxの 3.0.11での解除が出来ません） 「test」の</div>直前に<br class="test3" />を入れると解除されるので すが、<br>を使わずに解除する方法はありますでしょうか？ 現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を 下に続けて並べたいと考えています。 ご教授よろしくお願いします。 ■■■HTML■■■ <div id="test"> <div class="test1"> <img src="画像" width="100" height="100" /> </div> <div class="test2"> <p>test2</p> </div> </div> <h2 class="test3">test</h2> ■■■CSS■■■ #test { width: 500px; margin: 0 0 20px 0; } .test1 { float: left; width: 100px; margin: 0 10px; padding: 0; } .test2 { float: left; width: 380px; margin: 0; padding: 0; } .test3 { width: 500px; clear: both; }
- 締切済み
- HTML
- IE7でfloatしない原因
css初心者です。 テキストの横に画像をフロートさせたいのですが、 IE７のみ、表示が崩れてしまいます。 原因を教えてください。 簡潔に必要な部分だけを書き出すと、 HTMLは以下のようになっています。 <div class="main"> <p class="float">テキスト1</p> <img src="a.jpg" alt="A画像" width="100" height="10"class="a"> <img src="a.jpg" alt="B画像" width="100" height="10"class="b"> <p class="padding"><a href="index.html">テキスト２</a></p> </div> CSSは以下。 div.main { width: 600px; padding:15px; } .float{ float:left; width:100px; } .a { float:left; padding-right:20px; padding-bottom:5px; } .b { clear:left; padding-bottom:5px; } .padding{ padding-bottom:10px; } 表現したいのは、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ このようなレイアウトです。 IE８、Firefox、Chromeでは希望通りのレイアウトになっていますが、 IE７でみると、 ～～～～～～～～～～～～～～ テキスト１ A画像 B画像 テキスト２ ～～～～～～～～～～～～～～ となっています。 また、画像が一つだけ（A画像だけ）のパターンもあるのですが、 この場合には ～～～～～～～～～～～～～～ テキスト１ A画像 テキスト２ ～～～～～～～～～～～～～～ となってしまいます。 A画像とB画像はまったく同じ大きさです。 padding-bottom指定は、各行の行間を開けたくて指定しています。 宜しくお願いします。
- ベストアンサー
- CSS
- フロートについて
ブロック要素のフロートについて質問します。 .1{ float:right; } .a{ width:200px; } .b{ width:50px; float:left; } .c{ width:50px; float:left; } <div class="1"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> | [ A ] | | [ B ][ C ] | 上記を下記のようにしたいのですが、思うようにできません。 | [ A ] | | [ B ][ C ] | 全体を右寄せに、かつB,Cも右寄せです。 B,Cに float:right; を指定すると、[ C ][ B ] と、Cの右側にBが来てしまいました。 一応自分なりに試行錯誤して、 .1{ float:right; } .2{ clear:both; } .a{ width:200px; } .b{ width:50px; float:left; } .c{ width:50px; float:left; } <div class="1"> <div class="a">A</div> </div> <div class="2"> <div class="1"> <div class="b">B</div> <div class="c">C</div> </div> </div> 上記の書き方で希望の表示にはなりましたが、もっと簡単な方法があるのでは？と思って質問しました。 どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- mfc-j738dnでコピーができなくなった原因や解決方法について教えてください。
- お使いの環境や関連するソフト、接続方法についても教えてください。
- ブラザー製品のトラブルに精通した専門家がお答えします。
補足
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>