0

サイドバーを左に、スライダーを右に動かそうとしていますが、画像がドキュメント フローから外れています。

基本的に私がやろうとしているのは、ユーザーがブラウザ ウィンドウのサイズを変更すると、画像が縮小することです (これが、max-width: 100% を使用している理由です)。

Chrome で表示して問題を確認する

4

1 に答える 1

0

以下のようにメインクラスで使っwidth : 100%てみることができます。

.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}

編集:

マークアップデザインを編集しました。記事のdivの外側に新しいコンテンツのdivを追加しました。

編集

#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}

#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}

.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}

この方法でクラスを変更すると、ブラウザのサイズが変更されると、画像のサイズが変更されます。

この問題についての簡単なデモを見ることができます。

http://jsfiddle.net/qCQ9H/2/

于 2012-10-26T21:47:27.353 に答える