css - 如何在 CSS Overflow DIV 中默认图像的右边缘?

标签 css

我在页面上有以下内容:

<div style="max-width: 600px; overflow-x: scroll;">
  <a href="PoolPanoramaBig.jpg" target="_blank">
    <img src="PoolPanoramaBig.jpg" style=""/>
  </a>
</div>

如果图片宽度超过 600 像素,则您可以将图片向左滚动以查看最右边的部分。但是,我想默认它,以便它在最初显示时已经完全滚动到左侧。

我试过将图像中的样式设置为 float:left ,这有效但会禁用​​水平滚动条。

想法?

编辑:这里有一个页面可能有助于解释我正在尝试做的事情:http://guyellisrocks.com/ie-example/ 您知道如何必须将滚动条向右移动才能看到图像的最右边吗?我希望它在您第一次点击该页面时默认为该页面。

我在 JavaScript 中执行此操作没有问题,如果可能的话,我将不胜感激。否则,如果可以用 CSS 做到这一点,那么我首先会尝试这样做。

最佳答案

尝试在图像右侧添加一个 anchor 。像这样的东西:

<img src="foo.jpg"><a name="right_of_image"></a>

导航到页面时或导航到页面后,如果将 #right_of_image anchor 附加到文档 URL,浏览器将尝试聚焦在 anchor 上,有效地滚动到图像的右边缘。如果您使用的是像您现有的那样的滚动容器,这可能不会起作用,但如果图像直接嵌入到您的页面中,这应该会起作用。这对你有用吗?

关于css - 如何在 CSS Overflow DIV 中默认图像的右边缘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1610703/

相关文章:

html - 导航链接工作但未通过 FreeCodeCamp 挑战中的测试 : Product Landing Page

html - 将鼠标悬停在带有 :before 的内联菜单中

html - 在调整页面大小之前,iframe 不会加载到 css 列中

css - 为什么css中rotateX的负值不会改变旋转方向

javascript - 如何在 vanilla js 中插入媒体查询?

html - CSS 在实时网站上的显示方式与在 Codecademy 上的显示方式不同

html - 靠近内联元素时图标改变宽度

css 样式表在非内联时不起作用

jquery kwicks 和 css

html - 如何使用css3并排放置两个div