0

ページのコンテンツ用のメイン コンテナー DIV があり、水平方向に中央揃えになっています。

HTML:

<div id="master_container">
  .. my content here ...
</div>

CSS:

#master_container {width: 960px; margin: 0 auto;}

クライアントは、ページの両側 (master_container の外側) に広告を掲載したいと考えています。これらの div を配置するためにさまざまな CSS を試しましたが、ウィンドウのサイズを変更すると、master_container と重なります。また、ページをスクロールしたときに浮かせるように求められます。

誰でも正しい解決策を教えてもらえますか? 前もって感謝します...

4

2 に答える 2

1

どのようにそのことについて：

デモ: http://jsfiddle.net/insertusernamehere/Ct5BM/

HTML

<div id="master_container">
    <div class="ad left">Advertising</div>
    <div class="ad right">Advertising</div>
    The real content …
</div>

CSS

<style>

    body {
        width:      100%;

    }

    #master_container {
        position:   relative;
        width:      960px;
        height:     500px;
        margin:     0 auto;
        border:     1px solid red;
    }

    div.ad {
        position:   absolute;
        top:        0px;
        width:      200px;
        height:     400px;
        margin:     0px 0px 0px 0px;
        border:     1px solid blue;
    }

    div.ad.left {
        left:       -220px;
    }

    div.ad.right {
        right:      -220px;
    }

</style>

編集：仕組み

メイン要素を相対的に配置すると、コンテンツ内のフローから取り出されませんが、配置、z インデックスなどのための新しいスペースが開かれます。したがって、絶対位置を持つこのコンテナー内の子要素は、その位置に関連しています。親。したがって、この例では、「ad」要素の幅は 200px で、左が -220px の場合、左側のコンテナの外側に移動され、少し「余白」が追加されます。

于 2012-07-15T10:19:42.373 に答える
1

>>デモ<<

[ に 700px の幅を使用したことに注意してください#master_container]

1.ポジショニング

最も重要な CSS は、広告のスタイルと配置であり、クラスに.advertis次のように指定しました。

.advertis {
    position: fixed; /*creates floating effect */
    top: 20px; /* divs will always stay 20px from top */
    width: 220px;
    padding: 10px;
    background: white;
    border: #ccc 1px solid;
    border-radius: 4px;
}

#left {
    margin-left: -613px; left: 50%; /* positioning of left ads */
} 

#right {
    margin-right: -613px; right: 50%; /* positioning of right ads */
}

必要なマージンをどのように計算すればよいのでしょうか? 単純：

#master_container(パディングを含む) =の幅を取得します720px。2=で割り360pxます。広告の幅 (パディングとボーダーを含む) =を追加します242px。240px + 360px = 600px. コンテナと ad = の間に必要なスペースを追加します11px(私の場合)。

242px (full width of ad) + 360px (half of container) + 11px (space between ad and container) = 613px (margin needed)

2. ウィンドウが小さすぎる場合の非表示

広告がウィンドウに収まらなくなったら、広告を非表示にする必要があります。そのためのオプションがあります：

  • メディア クエリ
  • jQuery (または JavaScript または別のライブラリ)

最初の jsFiddle では、メディア クエリを使用しました (すべてのブラウザーでサポートされているわけではありません)。このFiddle では、 jQuery を使用して同じ効果を得ています。

function widthCheck() {
    var ads = $(".advertis");

    if ($(window).width() < 1225) {
        ads.hide();
    }
    else {
        ads.show();
    }
}

widthCheck(); // Execute onLoad

$(window).resize(function(){
    widthCheck();  // Execute whenever a user resizes the window
});

</p>

どちらを使用するかはあなた次第です。いくつかの長所と短所をリストしますので、自分で選択してください。

長所 メディア クエリ:

  • モダン、プログレッシブ
  • JSが無効になっている場合でも機能します

短所：

  • すべてのブラウザでサポートされているわけではありません

長所jQuery：

  • すべてのブラウザで (同様に) サポートされています

短所：

  • JSが無効になっていると機能しません
  • メディアクエリほど進歩的ではない
于 2012-07-15T10:49:42.990 に答える