0

緑色のボックスは青色のボックスの中にあるはずです。そうではありません。誰かが理由と解決方法を教えてもらえますか?" http://jsfiddle.net/6MN8R

-------- 元の質問 -----------

これの側面は .content 子 div に拡張されていません... 私はオーバーフローを経験しており、最後の子の最後にある div をクリアしています。誰か助けてもらえますか?

Main は親 div であり、子 div はその div から生成されます。

メインの高さを変更すると正常に動作しますが、動的に作業する必要があります

#main {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 90%;
    position: relative;
    background-image: url('../images/top.jpg');
    background-repeat: repeat-x;
}

#main .leftside {
    float: left;
    width: 47px;
    height: 100%;
    background-image: url('../images/left.jpg');
    background-repeat: repeat-y;
}

#main .rightside {
    float: right;
    height: 100%;
    background-image: url('../images/right.jpg');
    background-repeat: repeat-y;
}

#main .content {
    margin-right: auto;
    margin-left: auto;
    float: left;
    top: 36px;
    width: 92%;
    position: relative;
    background-color: #FFFFFF;
}

.clear {
    clear: both;
 }

ここにHTMLコードがあります

<div id='main'>
    <div class='leftside'>
        <img src='images/tleft.jpg' alt='' />
    </div>
    <div class='rightside'>
        <img src='images/tright.jpg' alt='' />
    </div>
    <div class='content'>
<div>Test</div>
<div>Test</div>
<div>Test</div>
    </div>
    <div class='clear'></div>
</div>
4

1 に答える 1

0

あなたはposition: relativeあなたのコンテンツ部門にあります。それを取り除くだけです。css と html にいくつかのマイナーな変更を加えました - いくつかの画像を置き換え、コンテンツを左右の div の間に収まるようにしましたが、とにかくそれがあなたの設計意図だったと思います。

http://jsfiddle.net/6MN8R/1/

なぜこれが起こるのかと自問するかもしれません。位置を相対的に設定し、上部を 36px に設定します。すべてのフロート、サイド div、およびその他すべてのがらくたを忘れてください。何かを相対に設定し、上、左、右、または下に再配置すると、親コンテナーの外に移動できます。親コンテナーのサイズには引き続き影響しますが、その場所には影響しません。コンテンツ div によって親コンテナーが大きくなりましたが、位置が上にあるため、下に移動してメイン div から外れました。

于 2013-01-30T17:46:42.900 に答える