0

固定幅のコンテナ div があります。子要素の 1 つをブラウザー ウィンドウと同じ幅にしたい。親コンテナーから子要素を取り出しますが、機能が損なわれます。私はこれを試しました：

.parent { width: 960px; position: relative; left: 50%; margin-left: -480px; }
.child { position: absolute; left: 0; right: 0; width: 100%; }

これについて：

<body>
    <div class="parent">
        <div class="other">This div's positioning is absolute but dependent on the parent element's relative positioning</div>
        <div class="child>This div wants to be centered and as wide as the browser window</div>
    </div>
</body>

しかし、それはうまくいきません。何か私にできることはありますか？

4

3 に答える 3

0

現在の CSS 構成を保持したい場合は、JQuery を使用してこれを行う必要があります。

$(function() {
    $('.child').width($(window).width());
});

編集：

これは機能し、ウィンドウの幅にも応答するはずです。

$(function() {
    $('.child').width($(window).width());
    $(window).resize(function(){
        $('.child').width($(window).width());
    });
});

必要に応じて、繰り返す行を含む関数を作成できます。

編集2：

要素を左に揃えるには、次を使用します。

$(function() {
    position();
    $(window).resize(function(){
        position();
    });
})

function position() {
    $('.child').width($(window).width()).offset({left: 0, top: 0});
}
于 2013-04-09T22:15:02.190 に答える
0

正確に何を達成しようとしていますか？using を使用position:relativeすると、すべての子要素 ​​usingposition:absoluteが親要素の左上のピクセルから開始されます。それを削除すると、 divposition:absolute内の要素は、代わりに.parent左上のピクセルから始まるようになります。body

子要素の配置ではなく、配置.parentのためにdivの相対的な配置を使用していると仮定すると(これは使用方法です)、次のように同じことを実現できます。

<body>
    <div class="parent">
        <div class="child">stuff</div>
    </div>
</body>

body { text-align: center; }
.parent { width: 960px; margin: 0 auto; text-align: left;}
.child { position: absolute; left: 0; right: 0; width: 100%; }

ここでコンテンツを説明するのに役立つサイズと色の属性を持つ jsfiddle : http://jsfiddle.net/Ncy5Y/

于 2013-04-09T22:13:37.463 に答える