2

ページの右上にコールアウト画像を貼り付けようとしていますが、画面が特定の幅を下回ると移動したくありません。そうしないと、他のページ要素と重なり始めます。これについて最善の方法を知っている人はいますか？ありがとう！

4

1 に答える 1

0

標準の CSS プラクティスは、ページ上の各要素をブロックとしてカプセル化する必要があることを示しています。

<div style="float:left;">
    <div style="float:left;">
        <img src="picture.png" />
    </div>
</div>

この種のスタイルでは、要素を互いに積み重ねることができ、重複を防ぎます。

あなたの場合、ヘッダーがあるように聞こえ、右上に画像を固定する必要があります。

<div id="header" style="width:100%;float:left;">
    <div style="float:right;">
        <img src="picture.png" />
    </div>
</div>

<!-- continue stacking elements to build your page -->

<div id="content" style="width:100%;float:left;">
    Hey, this stuff works!
</div>

ただし、ユーザーが幅を縮小しようとしたときに要素が水平方向に重ならないように、ページには最小幅が必要であるとも述べました。

<body style="min-width:800px;">

    <div id="header" style="width:100%;float:left;">
        <div style="float:right;">
            <img src="picture.png" />
        </div>
    </div>

    <!-- continue stacking elements to build your page -->

    <div id="content" style="width:100%;float:left;">
        Hey, this stuff works!
    </div>

</body>
于 2012-09-28T15:56:50.667 に答える