-1

フロートがオーバーフローする問題があります（ここではJSFiddle）。

HTML

<div id="father">
    <div id="son">
        gruik
    </div>
    <div id="dog">
        gruikgruik gruik gruik gruikg ruik gruik gruikgr uikgruik gruik gruik gruik
    </div>
</div>​

CSS

div { border: solid; }
#father { width: 300px; position: relative; }
#father:after { content: ""; display: block; clear: both; }
#son { width: 100px; float: left; border: solid red; }
#dog { float: left; border: solid blue; position: absolute; left: 105px; }

ご覧のとおり、#dogからオーバーフローし#fatherます。私は古典的なCSS手法を試しましたが、機能しません（clearfixメソッドでもoverflow:hidden;orでもありませんoverflow:auto;）。

位置CSSプロパティを使用しているために問題が発生すると思いますが、必要です。

4

1 に答える 1

2

position: absolute;#dog要素を相対的に正しく配置しています#father（ があるため#father）position: relative;。

ただし、その高さ#sonを与えているのは要素だけです。#father絶対配置された要素はフローから取り出されるため#dog、高さが増加すると、その親コン​​テナー ( #father) は増加せず、#dogオーバーフローしているように見えます。

position: absolute;を使用する必要があるのはなぜ#dogですか?

float を使用して幅を設定することはできませんか? とにかく親と兄弟の幅を設定しているので、どの幅が必要かがわかります（境界線の幅も指定する場合）。

デモ: http://jsfiddle.net/sgw4K/5/

編集/更新:追加のスタイルを発見した後、thirtydotは問題に対して 2 つのサウンド修正を推奨しました。以下のコメントまたは以下を参照してください。

これを修正するには、要素から削除しfloat: leftてから#son、次の 2 つの選択肢のmargin-left: 52pxいずれかを選択します。overflow: hidden;#son

于 2012-06-22T15:16:15.500 に答える