ベストアンサー

回り込みfloatの連続？

2006/12/22 19:17

ボックス１■ボックス２□ボックス３●ボックス４○を ■□ ●○ のように表示させたいです。まず■でfloat:left; ここまでは確実だと思います。が、そのあとどう続ければいいですか？どこでclearを指定すればいいですか？ちなみに、■と●、□と○、それぞれ幅は異なり、 ■+□の幅と●+○の幅は等しいです。お願いします。

Musicful-hearts
お礼率47% (220/463)

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

himajin100000
ベストアンサー率54% (1660/3060)

2006/12/22 19:42 回答No.2

また間違えているorz No.1の回答やると基本的に div#Area-Y div.Content { float:left; width:60%; /* background-color:transparent; とみなされると思う */ } と規定される右下領域は div.Area { background-color:blue; } の背景色になるから青色になってます。 div#Area-Y div.Content { float:left; width:60%; background-color:red; } に変更します

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

himajin100000
ベストアンサー率54% (1660/3060)

2006/12/22 19:36 回答No.1

先日...じゃない今朝だ今朝と似たような感じです。 borderの幅を考慮してwidthを変更する必要がないことから background-colorを使っています。本当はHTMLのこと考えてID属性は大文字であるべきとか色々あるんですが、考えるの面倒くさいのでその辺は省略します <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>実験</title> <style type="text/css"> html{ margin:0; padding:0; } body { margin:0; padding:0; } div.Area { margin:0; padding:0; clear:both; width:50%; overflow:auto; background-color:blue; } div#Area-X div.Menu { margin:0; padding:0; float:left; width:30%; background-color:green; } div#Area-X div.Content { margin:0; padding:0; float:left; width:70%; background-color:pink; } div#Area-Y div.Menu { margin:0; padding:0; float:left; width:40%; background-color:orange; } div#Area-Y div.Content { float:left; width:60%; } </style> </head> <body> <div id="Area-X" class="Area"> <div class="Menu"> Xメニュー </div> <div class="Content"> X内容 </div> </div> <div id="Area-Y" class="Area"> <div class="Menu"> Yメニュー </div> <div class="Content"> Y内容 </div> </div> </body> </html>

ログインすると、全ての回答が全文表示されます。