0

この問題をどのように説明するかは正確にはわかりませんが、ここでは何も起こりません。

サイトの左側にナビゲーションがあります。

.headerWrapper {
    border: 1px solid #FFFFFF;
    float: left;
    height: 745px;
    margin-left: 40px;
    width: 250px;
}

そのすぐ隣には、画像が入ったクラスがあります。

.mainContent {
    float: left;
    padding-left: 5px;
    width: 1000px;
}

画像の幅は1000pxで、これは画像の幅属性で設定されます。

このレイアウトは私の画面では見栄えがしますが、他の画面では画像がheaderWrapperの下に表示されます...これを行う理由と修正方法を教えてください。

4

1 に答える 1

2

ナビゲーションと画像の両方に収まる十分な幅の領域がないため、画像は下に表示されます。マイナーな修正については、のマージン、パディング（0前後）を試して.mainContent、両方.headerWrapperをbody並べて収まるようにしてください。

ただし、すべての解像度への適応性を高めるには、CSSメディアクエリを使用する必要があります。

これがフィドルです。結果ウィンドウのサイズを変更して、アニメーションを確認します。

基本的に、メディアクエリを使用すると、ウィンドウサイズに応じてスタイルを定義できます。たとえば、場合によっては、低解像度の画面に収まるように画像のサイズを縮小することができます。

それが役に立てば幸い。:)

于 2012-07-12T20:49:40.900 に答える