1

div 内に div があり、子は親の中心にあり、親よりも大きいため、両側で均等にオーバーフローします。子には、テキストを含む別の div が含まれています。

<div class="outer">
    <div class="inner">
        <div class="text">
            testing testing
        </div>
    </div>
</div>

CSS:

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;

}

.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

.text
{
   margin-left: auto;
   margin-right: auto;
   width: 400px;
}

http://jsfiddle.net/msVVD/4/

これで、ブラウザ ウィンドウのサイズを変更してドキュメントの幅を狭めた場合、または jsfiddle の場合、「JavaScript」と「結果」の間のハンドルをドラッグしてサイズを変更した場合、テキストは同じ水平位置にとどまらず、「移動」して権利。

なんで？

4

2 に答える 2

1

.inner要素を要素に対して相対的に配置していません.outer。に追加position: relativeし.outerます。

CSS の変更:

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;
    position: relative;
}

.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
    margin-left: -100px;
    padding-left: 100px;
}

フィドル: http://jsfiddle.net/msVVD/7/

于 2013-08-19T11:35:51.937 に答える
1

そのように、本体（または絶対配置された要素が整列される親コンテナ）に最小幅を設定する必要があります

body
{
    min-width: 600px;
}

これにより、絶対位置が移動するのを防ぎます

フィドル

于 2013-08-19T11:38:49.937 に答える