プロが教えるわが家の防犯対策術！

htmlでのfloatを解除すると 親要素も解除に

解決済

  • 質問者：infumi1126
  • 質問日時：
  • 回答数：5件

だだいま、ホームページを作成中です。

現在、
＿＿＿＿＿＿＿
| |
￣￣￣￣￣￣￣
|￣| |￣￣|aabbcc
|親| |　 　|aabbcc
|要| |　 　|
|素| ￣￣
|　 |★
|＿|
ddeeff
ddeeff



float:leftを使って二重で回り込みを
させています。

上記の
aabbcc
aabbcc

の部分で floatを解除させるために
clear:leftをすると、
親要素のfloatも解除されてしまします。


次に入力する文章の
ddeeff
ddeeff
を「★の場所」に表示されるようにしたいのですが、
親要素のfloatが解除された場所に表示されてしまいます。

cssの仕様で、
floatの解除をすると、親要素まで解除されるということですが
何か、解決する良い方法はないでしょうか？？


どなたか、ご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　ざっとイメージを拝見した限りでは、本来は、<p>aabbcc</p><p>aabbcc</p><p>ddeeff</p><p>


ddeeff</p>の部分が本文のように見受けられます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )］より

　そもそも、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自体が、文書構造(これは著者にしか分からない)に従ってちゃんとマークアップされているかを確認してください。それさえ出来れば後はとっても簡単です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
みなさんの回答をもとに色いろと試していたら、
解決できました。

通報する
お礼日時：2011/01/23 18:12

No.5

  • 回答者： metametamu
  • 回答日時：

HTMLやCSSがわかれば具体的に回答できると思うんですが・・・


補足は可能ですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
他の方の方法を色いろと試していたら、
解決できました。

通報する
お礼日時：2011/01/23 18:12

No.3

  • 回答者： k0021
  • 回答日時：

aabbccにfloatの解除でなくddeeffでfloatの解除指定すればよいですよ。



罫線つきで表示は、プラウザにより表示が異なります。

2列目大きさ
2列目の1列目大きさ
？？？？？
2列目の1列目大きさを閉じる
2列目の2列目大きさ
aabbcc
2列目の2列目大きさを閉じる
2列目大さを閉じる
2列目大きさ
ddeeff
2列目大きさを閉じる
2列目のまわしこみの解除

私の使用例ですが　余分のことを　しているかも
3列で2列目に2列と3列を追加していますが
「htmlでのfloatを解除すると 親要」の回答画像3
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： kuzumiHK
  • 回答日時：

親要素の右側のブロックをきっちりの幅にして、次のaabbccが回り込めないようにするか、


右側のブロックとaabbccを同じブロックにまとめないかぎり難しいと思います。

幅固定レイアウトであれば、前者の方法で幅をpxで指定するだけで解決できそうです。
可変の場合は%での指定が混在するため苦労しそうです。
もし、右側ブロックとaabbccが親ブロックよりもコンテンツとしてのつながりが深いのであれば、
囲ってしまうのもありだと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

囲ってみたら、いけそうです。
いろいろ試してみます。

通報する
お礼日時：2011/01/23 18:10

No.1

  • 回答者： think49
  • 回答日時：

一方のマルチカラムの手法を変えるのはどうでしょう？


float: right; にするとか、position で位置をずらすとか…。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
やってますが、ただいま苦戦中です。。。

通報する
お礼日時：2011/01/23 18:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報