html - この種のポジショニングは可能ですか - ユーザーフレンドリーなサイト構造とポジショニング - javascript なし

Question

だから私が達成したいのは、1000pxのメイン画面と右側の広告スペースです

訪問者の画面幅が 1160 より小さい場合、訪問者が右にスクロールしない限り、広告画面は表示されません

でも広告枠とメイン画面の合計ではなく、メイン画面に合わせて余白にしたい

この種のポジショニングは javascript なしで可能ですか?

わかりました、ここに写真があります

Answer 1

メディア クエリ、特に幅の特徴を調べる必要があります。

これにより、使用可能な幅に応じて CSS をカスタマイズできます。

@media screen and (min-width: 1160px) { … }

Answer 2

CSS@mediaを使用することは可能ですが、パーセンテージを使用することを好みますが、例を次に示します。

#page{
    width:80%;
    margin:0% 9% 0% 10%;
}
#left{
    display:inline-block;//alternative needed for ie 8 and below
    width:80%;
}
#right{
    width:19%;
    display:inline-block;
}

@media screen only and (min-width:1160px){
    #right{
        display:none;
    }
    #left{
        width:100%;
    }
}

ユーザーの画面解像度の幅が 1160px より小さい場合。要素の CSS プロパティが変更されます。