0

こんにちはこれは簡単な初心者の質問ですが、とにかくそれを尋ねなければなりません。私のフィドルを参照してください：

http://jsfiddle.net/jjalbert/xXdev/

コード：

<h1>Hi!</h1>
<p>Some more text</p>
<div id="bottomcorner"></div>

#bottomcorner {
    position: fixed;
    bottom:0;
    right:0;
    background-color:red;
    width: 100px;
    height: 100px;
}    

h1 {
    color: green;
    font-size: 20px;
    width: 200px;
    font-weight: bold;
}

p {
    color: blue;
    width: 230px;
}

右下に固定された要素がありますが、特定のブラウザ幅が作成された後は静的な位置にとどまり、左側のコンテンツに干渉し始めないようにします。

ですから、私のフィドルでは、ブラウザウィンドウの幅が約330ピクセルになったら、赤いボックスをそのままにして、ブラウザの隅から固定されないようにします。

4

2 に答える 2

2

CSSメディアクエリを確認してください。これで作業が完了します。

CSSメディアクエリ

@media all and (min-width: 300px) {
    ...css rules here...
}
于 2012-11-05T18:53:15.420 に答える
1

右にフロートさせて、最大幅のdiv内に配置し、右下の赤いボックスではなく、下部のdivの位置を固定することができます。

于 2012-11-05T18:59:13.560 に答える