- ベストアンサー
CSSリスト外枠から文字と画像がはみ出るclearfix
- CSSのclearfixを使って、リストと画像がはみ出る問題を解決する方法について質問しています。
- 質問者は、リストと画像が表示されるボックスに1pxの外枠を追加したいが、上の行までしか外枠が表示されないという問題に直面しています。
- HTMLとCSSのコードが提供されており、何が間違っているのか、また解決策としてCSSのclearfixをどのように使えば良いのか尋ねています。
- hitujiguma
- お礼率85% (24/28)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
≫widthは固定ですが、heightは可変にしたいです。 これは超難題だ!! 枠さえ引かなくてよいなら、absoluteで配置すればすむのだが、IEには、XHTML(お示しのソースはXHTML)だと、floatとclearにはさまれたabsoluteで指定されたブロックを抹消する致命的なバグがあって・・。まったく画面から消えるので手の打ちようがない。 また、内容領域をCSSの仕様書とは異なる解釈をする唯一のブラウザで、firefox,Opera,safariでは、まったく問題ないスタイルシートがIEでは使えない。 ただ、横幅固定なら、ユーザーエージェントは限定されるのですが、デザイン自体は楽です。 1) 幅を固定したブロック要素をfloatで配置する。 ★内部にabsoluteブロックを置かない(IEのバグ対策) 2) 区切り線<hr />をclearのためにブロック内に置く ★これは、visibility:hiddenで隠す。 ★これまたIEのバグでhrの高さ(マージン)が小さくならないけどしようがない [HTML修正部分] ☆ imgはinline要素で<div>内にはそのまま書けるのだが、意味的にも、またCSS出のデザインのためにも必要なため<p></p>で括る ☆リストの画像は「デザインのための画像」で文書構造と指定の意味は持たないためスタイルシート側で記述する。 [注意] ☆これまたIEの対策だが、リストの目印の位置やマージンやパディングがCSSの仕様とは異なるため、具体的に指定しておく必要がある。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>タイトル</title> <style type="text/css"> <!-- div.box{ border:1px solid red; position:relative; margin-left: auto; margin-right: auto; width: 620px; padding:0px; } div.box p{ width: 180px; float:left; margin: 10px 20px 0px 10px; } div.box>ul{ margin: 10px 5px 0px 5px; width: 120px; float:left; padding: 2px; } div.box>ul li{ margin-left: 2em; list-style-image: url(gif/rarw.gif); padding: 0px; list-style-position: out-side; } div.box hr{ clear: left; visibility: hidden; margin:0px; } --> </style> </head> <body> <h1>title</h1> <div class="box"> <p> <img src="Sample.jpg" width="180" height="133" alt="**の写真" /> </p> <ul> <li> 1111</li> <li> 2222</li> <li> 3333</li> </ul> <ul> <li> 4444</li> <li> 5555</li> <li> 6666</li> </ul> <ul> <li> 7777</li> <li> 8888</li> <li> 9999</li> </ul> <hr /> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私は原則としてfloatは使いません。ブラウザによって解釈が違うことが多い（特に多数派のIE一つが足を引っ張る)ことと、floatさせる要素は、そのボックスの内容の高さに反映されないからです。 あなたの場合、上のborderしか表示されないのではなく、内容の高さがゼロだから高さもゼロになるからです。 解決方法をアドバイスしたいとは思いますが、追加情報をください。 このブロックは、固定幅なのか可変なのかと、その場合のサイズ 画像の大きさは一定なのか？ リストのテキスト幅は？ テキストの行数と画像の高さ たとえばユーザーが文字を拡大したときには？ など、
補足
早々にありがとうございます。 widthは固定ですが、heightは可変にしたいです。 左の画像は100×80です。（変更可能） テキストは5行×横に3つで全部で15項目です。（文字数は1項目6～11文字） これで情報は足りますでしょうか。 ユーザーの文字サイズ変更にも対応させたいと思っています。
お礼
わかりやすい説明をありがとうございます。 <hr />をclearに使う方法やバグの事など、質問内容以上の詳しい回答をしていただいて大変感謝しております。 とても勉強になりました。 貴重なお時間をさいてのご回答、本当にありがとうございました＾＾