Question

当我将窗口调整得太小时，图像会从页面左侧滑落。甚至没有办法滚动到它。我该怎么做才能防止图像从页面上滑落？问题是绝对的div，但我不知道如何在没有它们的情况下让它工作。

代码：

<!DOCTYPE html>
<html>
<head>

<style>

body {
  margin: 0;
}
.chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

</style>

</head>
<body>

<div class="chart">
  <img src="Resources/chart.png" width="432" height="256" style="display: block; position: absolute; top: 50%; margin-top: -128px; right: 0;"/>
</div>

</body>

</html>

1：http://www.freeimagehosting.net/image.php?11b1fcb689.png＆gt; http：//www.freeimagehosting.net/uploads/th.11b1fcb689.png

Answer 1

将其定位于：

.chart {position: relative; }

position:absolute;将其从文档的流程中取出，因此不会使用滚动条来计算它。 position: relative;将元素保留在流中，因此您仍然可以滚动到该元素。

修改

回应迈克尔的评论：

我希望它垂直居中。相对定位是否可能？

是的，确实如此。它涉及一个小小的jiggery-pokery，但我使用的是FF3.0.11 / Ubuntu 8.04，所以奇怪的可能与平台有关。

首先定义定位元素的左上角：

.chart {position: relative;
        width: 50%;
        left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
        margin: 25% 0 0 -25%;
}

解释边缘：

我最初尝试使用与position: absolute;（top: 50%; left: 50%;）相同的定位，但这不起作用。我不确定为什么，虽然我怀疑它与如何计算百分比的高度有关。尽管如此，试验和错误（这就是为什么我注意到上面的浏览器/平台）发现25％似乎将原点（.chart的左上角）放在正确的位置。

然后25％只代表我的最佳猜测垂直中心。 -25％更容易理解，它通常是“水平中心减去元素宽度的一半”。虽然你可以更容易地使用width: 50%; margin: 0 auto;来实现同样的目的。

我不明白为什么使用通常的top: 50%定位不起作用，但我使用的是css-reset样式表（特别是Eric Meyer的'重新加载'样式表，可在此处找到： http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/）

值得注意的是，该页面在Midori中与Firefox一致（我认为使用Webkit渲染引擎），我将很快上传演示页面（ {{ 3}}）公共嘲笑审查差异。

而且，如果有人可以提供帮助并解释必须使用边距而不是top: xx进行垂直定位的奇怪之处。

如何防止定位的块图像从页面滑落？

1 个答案:

修改