2

2つの画像を並べて表示するページを作成しようとしています。これらのアイテムを本の形式で画面の中央に配置し、ブラウザのサイズを変更すると、画像の高さが変更されてウィンドウ全体に表示されるようにします。

これを行うために、私は効果を達成するためにテキスト整列された中央のディスプレイインラインブロックを使用しています。ITはFFでうまく機能しますが、サイズ変更時にSafariまたはChromeで開くと、divが重なり始めます。私は自分のdomの例を示すためにこのjsfiddleを作成しました。後でページ画像の上にリンクを絶対に配置するため、pageOneとpageTwodivをインラインブロックする必要があります。

私は何が欠けていますか？

この問題を確認するには、safari / chromeでjsFiddleを開き、結果ペインをデフォルトより大きくする必要があります。ブラウザの通常の幅/高さの約1/2から始めます。jsFiddleを実行しているときに、ブラウザーを拡大して、2つの画像がどのように重なり始めているかに注目してください。FFで開くと、重なりません。

http://jsfiddle.net/X9NNh/1

テーブルを使用して、すべてのブラウザーで必要な効果に近づけることができました。

http://jsfiddle.net/x82uK/

4

1 に答える 1

1

実際、これらのインラインブロックコンテナは、コンテンツのスケーリングに合わせてコンテンツのサイズを変更しないため、これには注意が必要です。

画像の上にリンクを完全に配置することになると、仕事が難しくなります（JavaScriptが必要です）が、を使用した別のアプローチbackground-size: containを次に示します。

HTML：

<div id="issue">
  <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
  <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
</div>

CSS：

html, body {
  height: 100%;
  background: #666;
}
#issue {
  position: absolute;
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid grey;
  box-sizing: border-box;
  background: #EEE;
}
.page {
  position: absolute;
  top: 30px; bottom: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}
#leftPage {
  background-position: center right;
  left: 30px; right: 50%;
}
#rightPage {
  background-position: center left;
  left: 50%; right: 30px;
}
于 2012-07-04T01:02:38.590 に答える