当前位置：文江博客话题详情

HTML5 和CSS3 使用多个伪类和translateX/Y 属性

发布于 2024-12-04 01:24:43 字数 353 浏览 2 评论 0原文

首先让我承认我不是最擅长编码的，我是一名图形设计师，但我正在尝试自学 HTML5。我已经设法解决了大部分问题，但现在我很困惑。

本质上我的问题是，当您单击 iframe 内的缩略图时，它会将缩略图对齐在屏幕的最顶部。我尝试将translateY 添加到“page”类中，并且还在iframe 页面中尝试了它，但这导致主图片未对齐。

我的测试页在线 http://www.brodylahd.com/index2

回复 Cat Chen

是的，我认为这就是我需要做的......但它仍然会有相同的水平运动吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不是你的备胎 2024-12-11 01:24:43

由于您使用的是锚点（Uri 片段) 就像 href 属性中的 #a1 #a2 #a3 一样。

您可以尝试使用小型 JavaScript 解决方法来删除该片段或阻止页内移动，如下所示：

$('#thumbs').find('a').bind('click', function() {
    return false;
})

Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.

You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:

$('#thumbs').find('a').bind('click', function() {
    return false;
})

回复收藏 0 原文

烛影斜 2024-12-11 01:24:43

这是在 iframe 中定位锚点的问题，因此如果您定位浏览器，浏览器往往会以其中的内容为中心。

在您的情况下，最简单的解决方案（但并不理想）是控制滚动的位置，因此如果您添加

#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }

页面将在视觉上更加正确地居中，但仍然会滚动。

如果您想仍然使用 CSS，您可以尝试将您的 links+#aN:target .page{…} 行为更改为 1，这将使用位于 .page 块：#aN:checked+.page{…}，但我不确定当您使用收音机而不是浏览器时浏览器是否会滚动页面链接。

This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.

The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add

#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }

The page would be centered more visually correct, but still would scroll.

If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.

回复收藏 0 原文

~没有更多了~