1

我正在尝试使用 % 设计一个流畅的布局，其中书籍位于窗口高度的 50% 处，下一本书的四分之一可见，让人想向下滚动。

调整窗口大小不应改变布局，因此书籍的图像大小、边距等应以 % 给出。

但是，.books {position: absolute}对于包含divs 的设置，包含的图像的大小会缩小到缩略图大小，尽管图像本身相当大......

% 作为单位如何工作？我认为 100% 始终是其包含元素的 100%。为什么要position: absolute改变这个？

第二个问题，即使在使用 % 时，仅更改窗口宽度也会更改垂直布局。我曾假设垂直和水平方向是独立的。

以下是一些代码片段。

<div id="container">
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
  <div class="books">
    <img src="..." />
  </div>
</div>

#container {
  height: 200%;
}
.books {
  height: 25%; /* =50% of window height */
}

编辑：我找到了罪魁祸首：我分配了一个以 % 为单位的上边距，但所有（左上右下）边距值都定义为父级宽度的百分比......奇怪。

4

3 回答 3

1

将此添加到您的CSS

.books img {width:100%; height:100%}
于 2012-09-05T07:27:29.190 回答
0

您需要指定所有父母的身高，直到 html 即

html, body{
    height: 100%;
}
#container {
    height: 200%;
}
.books{
    height: 25%; /* =50% of window height */
}
.books img{
    height: 100%;
}

如果您更改为 position: absolute，那么父级将成为下一个位置父级，您可以通过将其设为 position: relative（或 position: absolute）来指定它。上面的代码意味着调整窗口大小会改变布局。但是你可以在链中的某个点设置一个特定的大小，或者用 javascript 来做？

于 2012-09-04T14:57:16.960 回答
0

要回答关于 的问题position: absolute，该元素是相对于其第一个定位（非静态）祖先元素定位的，因此包含 div 的 % 变化将影响图像大小。来源：点击这里

根据经验，您最终会在使用 % 宽度和高度的各种浏览器中遇到一些问题。根据检测到的正在使用的设备固定大小并提供多个样式表可能是更好的方法。

于 2012-09-04T14:27:07.673 回答