1

私はこのように両側に画像を含む私のウェブサイトを受け入れたいと思っています（これはユーザーのブラウザウィンドウを示しています）：（ ここに画像の説明を入力 gimpスキルを許してください...）

ウィンドウサイズを小さくしてメインコンテンツを小さくしたい。

とにかく、これまでのところ私はこれを試しました(JSFiddle) :

HTML:

<div id="everything" class="container">
  <div id="left" class="container side-image-left"></div>
  <div class="container  main ">
    ... header logo etc ...
    <div class="container content">
      ...
    </div>
    ... footer etc ...
  </div>
  <div id="right" class="container side-image-right"></div>
</div>

CSS:

#everything {
    /*
    this was my temporary try for the red divs in my image, 
    just a static, nonadjusting background with width 1366px.

    background-image: url('../images/bg_everything.png');
    background-repeat:repeat-y;*/
    padding: 0;
    overflow: hidden;
    position: relative;
    max-width: 1366px;
}

.side-image-left, .side-image-right {
    position: absolute;
    top: 100px;
    width: 125px;
    height: 100px;
}
.side-image-right {
    right: 0;
}
.main {
    position: relative;
    max-width: 1116px;
    padding: 0;
    z-index: 100;
}

それに伴う問題：

  • サイドの div はコンテンツに固執しますが、ブラウザ ウィンドウが小さくなりすぎるとすぐに、代わりにブラウザ ウィンドウに移動します

  • 「メイン」.container に 2 番目の「コンテンツ」.container があります。これは、サイズ変更時に小さな「ジャンプ」を行います。メイン コンテナの背景は決して表示されるべきではありませんが、これらの「ジャンプ」の間、両側に空白のスペースがあります。jsfiddleで表示することをお勧めします。

では、図に示すように、どうすれば目的の動作を得ることができますか?

4

3 に答える 3

0

新しいクラス「セット」を使用する

<div id="everything" class="container">
  <div id="left" class="set container side-image-left"></div>
  <div class="set container  main ">
    ... header logo etc ...
    <div class="container content">
      ...
    </div>
    ... footer etc ...
  </div>
  <div id="right" class=" set container side-image-right"></div>
</div>

そしてCSS：

.set{
  display:inline-block;
}
于 2013-09-09T19:48:14.480 に答える