Question

我正在尝试构建一个页面以并排显示两个图像。我希望这些项目以书本格式居中在屏幕上，并且随着浏览器的大小调整，图像高度会发生变化，因此它们会填满窗口。

为了做到这一点，我使用带文本对齐中心的显示内联块来实现效果。它在FF上工作得很好但是当我在Safari或Chrome中打开调整大小时，div开始重叠。我创建了这个jsfiddle来展示我的dom的一个例子。我需要pageOne和pageTwo divs inline-block，因为后来我绝对将链接放在页面图像的顶部。

我错过了什么？

要查看该问题，您需要在safari / chrome中打开jsFiddle并使结果窗格大于默认值。从浏览器开始，大约是正常宽度/高度的1/2。当您运行jsFiddle时，请放大浏览器并注意两个图像是如何重叠的。如果你在FF中打开它们就不会重叠。

http://jsfiddle.net/X9NNh/1

我能够在使用表格的所有浏览器中接近我想要的效果：

http://jsfiddle.net/x82uK/

Answer 1

实际上，这很棘手，因为这些内联块容器不会调整自身大小以适应内容的缩放。

虽然使用background-size: contain {}进行绝对定位图片上的链接时，会使您的工作更难（请阅读：需要Javascript）。

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;
}

使用内联块设置的Safari / Chrome重叠元素

1 个答案: