When I resize the window too small, the image slides off the left of the page. There is no way to even scroll over to it. What can I do to prevent the image from sliding off the page? The problem is absolute divs but I don't know how to get it to work without them.
当我将窗口调整得太小时,图像会从页面左侧滑落。甚至没有办法滚动到它。我该怎么做才能防止图像从页面上滑落?问题是绝对的div,但我不知道如何在没有它们的情况下让它工作。
The code:
<!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>http://www.freeimagehosting.net/uploads/th.11b1fcb689.png
1 个解决方案
#1
Position it with:
定位:
.chart {position: relative; }
position:absolute; takes it out of the document's flow, so it's not accounted for with scrollbars. position: relative; keeps the element in the flow, so you can still scroll to it.
位置:绝对的;将它从文档的流程中取出,因此不会使用滚动条来计算它。位置:相对;将元素保留在流中,因此您仍然可以滚动到它。
Edit
In response to Michael's comment:
I'd like it to be centered vertically. Is it possible with relative positioning?
我希望它垂直居中。相对定位是否可能?
Yes, it is. And it involves a little jiggery-pokery, but I'm using FF3.0.11/Ubuntu 8.04, so the weirdness may be platform dependant.
是的。它涉及一个小小的jiggery-pokery,但我使用的是FF3.0.11 / Ubuntu 8.04,所以奇怪的可能是平台依赖的。
First define the top-left corner of the positioned element:
首先定义定位元素的左上角:
.chart {position: relative;
width: 50%;
left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
margin: 25% 0 0 -25%;
}
To explain the margins:
解释边缘:
I tried initially to use the same positioning I'd use with position: absolute; (top: 50%; left: 50%;), but that didn't work. I'm not sure why, exactly, though I suspect that it's related to how the height of the percentage is calculated. Still, trial and error (and this is why I noted my browser/platform above) found that 25% seemed to place the origin (top left corner of .chart) in the right place.
我最初尝试使用与位置相同的定位:绝对; (上:50%;左:50%;),但这不起作用。我不确定为什么,虽然我怀疑它与如何计算百分比的高度有关。然而,试验和错误(这就是为什么我注意到上面的浏览器/平台)发现25%似乎将原点(.chart的左上角)放在正确的位置。
The 25% then represents only my best-guess of vertically-centre. The -25% is easier to understand, it's the usual 'horizontal-center minus half the element-width' thing. Although you could maybe more-easily just use width: 50%; margin: 0 auto; to achieve the same thing.
然后25%代表我对垂直中心的最佳猜测。 -25%更容易理解,它通常是“水平中心减去元素宽度的一半”。虽然你可以更容易地使用宽度:50%;保证金:0自动;实现同样的目标。
I don't understand why positioning with the usual top: 50% didn't work, but I am using a css-reset stylesheet (specifically Eric Meyer's 'reset reloaded' stylesheet, found here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
我不明白为什么定位与通常的顶部:50%不起作用,但我使用的是css-reset样式表(特别是Eric Meyer的'重新加载'样式表,在这里找到:http://meyerweb.com/eric /思念/ 2007/05/01 /复位重载/)
It's worth noting that the page appears consistently-with-Firefox in Midori (which, I think, uses the Webkit rendering engine), and I'll be uploading the demo page shortly (to: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) for public ridicule review for differences.
值得注意的是,该页面与Midori中的Firefox一致(我认为使用Webkit渲染引擎),我将很快上传该演示页面(http://www.davidrhysthomas.co。 uk / so / rel-pos-centre.html)公开嘲笑差异。
And also, if anyone could help out and explain the weirdness in having to vertical-position with margins rather than top: xx that'd be appreciated.
而且,如果有人可以提供帮助,并解释必须垂直位置与边缘而不是顶部的奇怪:xx,这是值得赞赏的。
#1
Position it with:
定位:
.chart {position: relative; }
position:absolute; takes it out of the document's flow, so it's not accounted for with scrollbars. position: relative; keeps the element in the flow, so you can still scroll to it.
位置:绝对的;将它从文档的流程中取出,因此不会使用滚动条来计算它。位置:相对;将元素保留在流中,因此您仍然可以滚动到它。
Edit
In response to Michael's comment:
I'd like it to be centered vertically. Is it possible with relative positioning?
我希望它垂直居中。相对定位是否可能?
Yes, it is. And it involves a little jiggery-pokery, but I'm using FF3.0.11/Ubuntu 8.04, so the weirdness may be platform dependant.
是的。它涉及一个小小的jiggery-pokery,但我使用的是FF3.0.11 / Ubuntu 8.04,所以奇怪的可能是平台依赖的。
First define the top-left corner of the positioned element:
首先定义定位元素的左上角:
.chart {position: relative;
width: 50%;
left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
margin: 25% 0 0 -25%;
}
To explain the margins:
解释边缘:
I tried initially to use the same positioning I'd use with position: absolute; (top: 50%; left: 50%;), but that didn't work. I'm not sure why, exactly, though I suspect that it's related to how the height of the percentage is calculated. Still, trial and error (and this is why I noted my browser/platform above) found that 25% seemed to place the origin (top left corner of .chart) in the right place.
我最初尝试使用与位置相同的定位:绝对; (上:50%;左:50%;),但这不起作用。我不确定为什么,虽然我怀疑它与如何计算百分比的高度有关。然而,试验和错误(这就是为什么我注意到上面的浏览器/平台)发现25%似乎将原点(.chart的左上角)放在正确的位置。
The 25% then represents only my best-guess of vertically-centre. The -25% is easier to understand, it's the usual 'horizontal-center minus half the element-width' thing. Although you could maybe more-easily just use width: 50%; margin: 0 auto; to achieve the same thing.
然后25%代表我对垂直中心的最佳猜测。 -25%更容易理解,它通常是“水平中心减去元素宽度的一半”。虽然你可以更容易地使用宽度:50%;保证金:0自动;实现同样的目标。
I don't understand why positioning with the usual top: 50% didn't work, but I am using a css-reset stylesheet (specifically Eric Meyer's 'reset reloaded' stylesheet, found here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
我不明白为什么定位与通常的顶部:50%不起作用,但我使用的是css-reset样式表(特别是Eric Meyer的'重新加载'样式表,在这里找到:http://meyerweb.com/eric /思念/ 2007/05/01 /复位重载/)
It's worth noting that the page appears consistently-with-Firefox in Midori (which, I think, uses the Webkit rendering engine), and I'll be uploading the demo page shortly (to: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) for public ridicule review for differences.
值得注意的是,该页面与Midori中的Firefox一致(我认为使用Webkit渲染引擎),我将很快上传该演示页面(http://www.davidrhysthomas.co。 uk / so / rel-pos-centre.html)公开嘲笑差异。
And also, if anyone could help out and explain the weirdness in having to vertical-position with margins rather than top: xx that'd be appreciated.
而且,如果有人可以提供帮助,并解释必须垂直位置与边缘而不是顶部的奇怪:xx,这是值得赞赏的。