0

私の仕事では、既存の HTML テンプレートに基づいてクライアント向けにページをカスタマイズしています。つまり、変更できるのは CSS だけです。明らかに、これは多くの場合、問題に対する創造的な解決策を探すことを意味します。これができるかどうかはわかりませんが、CSS のみを使用して、ページ上の要素を元の位置の左側に再配置する必要があります。基本的に、この要素は通常中央に配置されますが、ヘッダー画像を中央に配置する代わりに、画像を画面の右上に配置する必要があるため (背景画像にしました)、他の要素の「中央」は現在です。少し右へ。

私の問題は、小さなウィンドウで要素が画面の左側から切り取られる原因となるこれを行う方法しか見つけられないことです。CSS のみを使用して、要素をブラウザ ウィンドウからはみ出さずに元の位置の左側に配置する方法はありますか? 説明が不十分な場合は申し訳ありませんが、私はこれを毎日行っていますが、完全に自己訓練しています. これが私が試したことです（失敗しました）：

.content {
background: #ffffff;
color: #000000;
margin-top: 0px;
position: relative;
left: -20%;
}

また、代わりに margin-left を使用し、最小幅を 100% に追加してみました。position:absolute を使用しようとしたときに、ページ上の他の要素が台無しになったので、それも不可能です。この問題の解決策をご存知でしたら教えてください。

4

2 に答える 2

1

要素を相対位置 DIV で囲むことができ、要素のコンテンツに position:absolute を使用できます。

<div style="position:relative">
   <div class="content"><img /></div>
</div>
于 2012-05-09T23:31:45.297 に答える
1

私はあなたの説明に従って次のことを試みました。あなたの問題を理解しているかどうかは100％確信が持てませんが、おそらく小さなウィンドウサイズに別のcssを適用することで問題を解決できるようです。次に例を示します。

@media only screen and (max-width: 480px) {
    .content {
       // whatever css you want to put here for window sizes smaller than 480px 
    }
}
于 2012-05-09T23:47:47.187 に答える