0

私のクライアントは、幅 1000 ピクセルのコンテナを中央に置き、左側に広告バナーを配置したいと考えています。問題は明らかなはずです。コンテンツの中央揃えと広告バナーの配置を同時に行うのに苦労しています。画面幅が 1024px の場合、バナーは表示されません。これは可能ですか？どのように？

これが私が意味することです：

ここに画像の説明を入力

4

4 に答える 4

2

これを使用すると、画面幅が 1024px 未満の場合にバナーを非表示にできます。

@media only screen and (max-width : 1024px) {
    .yourBannerClass { display:none; }
}

バナーの位置について、「position:absolute」で配置してみませんか？

于 2013-05-14T19:28:30.253 に答える
0

中央のコンテナの CSS は次のようになります。

.center
    {
    width: 1000px;
    margin:auto;
    }

広告バナーは、中央のコンテナに影響を与えないように絶対に配置する必要があります。

Jquery を使用して画面の幅をピクセル単位で決定し、それを使用してdisplay:none;、画面の幅が 1024 ピクセルの場合に広告ボックスのスタイル パラメータを変更できます。

于 2013-05-14T19:31:31.907 に答える
0

これは私がそれを行う方法です：

CSS:

.container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}
.ad {
    width: 100px;
    position: absolute;
    left: -125px;
    top: 0;
}
@media only screen and (max-width: 1125px) {
    .ad {
        display: none;
}

HTML:

<div class="container">
    container content here
    <div class="ad">
        ad code here
    </div>  
</div>

これは、広告とメイン コンテンツ div の間に 25 ピクセルの余白がある 100 ピクセル幅の広告が必要であることを前提としています。基本的に、これは.containerdiv を中央position: relativeに配置し、div を基準にして広告を配置するだけ.containerです。画面が小さくなりすぎると、広告は非表示になります (広告の幅 + 余白 + 1000px)。何らかの理由でメディア クエリが失敗した場合に、水平スクロールバーを回避するために要素overflow: hidden;を追加することもできます。body

position: relative絶対配置 div は、最初の親要素(この場合はdiv)の左上隅を基準にして配置され.containerます。これが、広告 HTML がコンテナ内にある理由です。

于 2013-05-14T19:44:21.073 に答える
0

コンテナの横に広告を配置するには、いくつかの方法があります。

方法 1:

広告の幅がわかっている場合は、コンテンツ コンテナと広告の両方をラップする追加のコンテナを使用してこれを行うことができます。余分なコンテナの幅は、コンテンツ コンテナの幅に広告の幅の 2 倍を加えたものになります。これにより、コンテンツ コンテナの左側と右側の両方に広告を配置する余地が残ります。

方法 2:

position: absoluteまたはを使用position: fixedして広告を配置します。これの問題は、ブラウザの幅を変更しても、コンテンツ コンテナに対する広告の位置が適切に変更されないことです。ただし、これはおそらく方法 1 よりも簡単です。

広告の非表示に関する問題については、CSS メディア クエリを使用できます。

于 2013-05-14T19:32:34.717 に答える