0

この問題があります: 絶対位置の親 div 内に 2 つの浮動 div があります。

CSS:

.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; /* doesn't do anything! */
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

HTML:

<div class="wrapper">
    <div class="left">some text here</div>
    <div class="right">some text here too</div>
    <div class="clear"></div>
</div>

Firefox では、ラッパーに が含まれていない場合、position:absolute意図したとおりにすべてが機能します。絶対にするとすぐに、ラッパーが縮小し、フローティングのコンテンツがdivsドキュメントの残りの部分と重なります。また、ラッパーの幅を 100% に設定すると、垂直スクロールバーに重なってしまいます。

私は何が欠けていますか？

4

3 に答える 3

0

overflow: hiddenclearfixを使用しているため、div.clearはまったく不要です。ただし、ラッパーも絶対に配置しているため、clearfixも不要であり、clearfixも不要です (少なくとも Chrome と FF では)。overflow: hiddenposition: absolute

http://jsfiddle.net/j6jkk/

于 2012-03-26T21:03:00.210 に答える
0

要素をフローティングすると、ドキュメント フローから除外されます。つまり、親の寸法に影響を与えず、絶対配置要素はデフォルトで 0 x 0 です。フロートされた要素の次の兄弟をクリアすると、その要素に実際にコンテンツがある場合、スタイルでその幅が設定されている場合、またはドキュメント フロー内にまだある他の兄弟のいずれかの幅が親の初期幅。

Mozilla Developer Network のこの記事を参照してください。ただし、これは Firefox だけでなく、一般的な CSS にも当てはまります。

フロート - MDN

この問題に関して、width: 100%ラッパーのオフセットの親がドキュメントである場合、これが Firefox が配置スタイルにどのように応答するかである可能性があります。div絶対位置の要素を空の位置に配置し、位置を に設定することで、これを軽減できる場合がありますrelative。

于 2012-03-26T21:14:37.527 に答える
-1

これを追加してみてください：

.wrapper{
    display: inline-block;
}
于 2012-03-26T20:58:21.110 に答える