- ベストアンサー
回り込みfloatの連続？
ボックス１■ボックス２□ボックス３●ボックス４○を ■□ ●○ のように表示させたいです。 まず■でfloat:left; ここまでは確実だと思います。が、そのあとどう続ければいいですか？ どこでclearを指定すればいいですか？ ちなみに、■と●、□と○、それぞれ幅は異なり、 ■+□の幅と●+○の幅は等しいです。 お願いします。
- Musicful-hearts
- お礼率47% (220/463)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数0
- みんなの回答 （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)
先日...じゃない今朝だ 今朝と似たような感じです。 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>
