- ベストアンサー
float解除で親要素も解除！HTMLでの回り込みを制御する方法とは？
- ホームページ作成中に問題が発生しました。floatを解除すると親要素も解除されるため、回り込みを制御できません。どのようにすれば解決できるでしょうか？
- HTMLのfloatを解除すると親要素も解除される問題について解説します。回り込みを制御する方法と、解決策についてご紹介します。
- floatの解除で親要素も解除される問題に悩んでいます。HTMLにおける回り込みの制御方法や、解決策について教えてください。
- infumi1126
- お礼率50% (21/42)
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ざっとイメージを拝見した限りでは、本来は、<p>aabbcc</p><p>aabbcc</p><p>ddeeff</p><p> ddeeff</p>の部分が本文のように見受けられます。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より そもそも、floatは、文章内で画像などの周囲に本文を回り込ませるための物ですから、回り込むのは本文であり、回り込まれるのは画像などです。多くのサイトでfloatをブロック要素の配置のために使用しているものを見かけますが、HTML的にもCSS的にも？？です。 たとえばHTMLが下記のようなものだと簡単に実現できますよね。【インデントを全角スペースで示していますので、これを半角スペースなりタブに変換すること】 <body> <div class="headLine" style="height:100px;border:1px solid green"> <h1 style="text-align:center">見出し部分</h1> </div> <div class="bodyText" style="position:relative;margin-left:200px; width:auto;border:solid black 1px;"> <div class="figure" style="float:left;width:200px; border:solid red 1px;height:150px;"> <img><!-- 挿絵 --> </div> <p>aabbcc</p> <p>aabbcc</p> <p style="clear:left">ddeeffgg</p> <p>ddeeffgg</p> <div class="navigation" style="position:absolute;top:0px; width:180px;left:-200px;border:solid blue 1px;height:400px;"> <p>目次</p> </div> </div> </body> HTML自体が、文書構造(これは著者にしか分からない)に従ってちゃんとマークアップされているかを確認してください。それさえ出来れば後はとっても簡単です。
その他の回答 (4)
- metametamu
- ベストアンサー率51% (153/295)
HTMLやCSSがわかれば具体的に回答できると思うんですが・・・ 補足は可能ですか？
お礼
ありがとうございます。 他の方の方法を色いろと試していたら、 解決できました。
- kuzumiHK
- ベストアンサー率72% (132/183)
親要素の右側のブロックをきっちりの幅にして、次のaabbccが回り込めないようにするか、 右側のブロックとaabbccを同じブロックにまとめないかぎり難しいと思います。 幅固定レイアウトであれば、前者の方法で幅をpxで指定するだけで解決できそうです。 可変の場合は%での指定が混在するため苦労しそうです。 もし、右側ブロックとaabbccが親ブロックよりもコンテンツとしてのつながりが深いのであれば、 囲ってしまうのもありだと思います。
お礼
囲ってみたら、いけそうです。 いろいろ試してみます。
- think49
- ベストアンサー率59% (285/482)
一方のマルチカラムの手法を変えるのはどうでしょう？ float: right; にするとか、position で位置をずらすとか…。
お礼
ありがとうございます。 やってますが、ただいま苦戦中です。。。
お礼
ありがとうございます。 みなさんの回答をもとに色いろと試していたら、 解決できました。