尝试使用位置缩放jquery面板切换器：绝对到我的网页

发布于 2024-11-15 11:07:10 字数 364 浏览 7 评论 0原文

我使用了 position:absolute;，这样当您单击顶部的“将此页面发送到您的电子邮件”选项卡时，面板会向下移动并浏览下面的内容，而不是将其向下推。但是，使用绝对位置意味着放大时选项卡将向左移动，缩小时选项卡将向右移动。当您放大或缩小时，它看起来不太正确。我希望当您缩小时选项卡“向内”而不是“滑动”。是否可以防止选项卡“滑动”并将其与滑出的面板对齐？

这是我的带有选项卡的页面： http://coroomer.com/apartments/ztestpage/index.php< /a>

原文

分享到QQ

分享到微博

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

发布评论

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

背叛残局 2024-11-22 11:07:10

由于您使用的是绝对定位，因此您无需担心 javascript/jQuery。您只需修改 HTML/CSS 即可，如下所示：
移动这个：

<p align="center" class="flip" id="toggle">Send this page to your email.</p>

使它成为这个的第一个子元素：

<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">

在上面的div（id =“map_canvas”）中，将溢出设置为“可见”。然后按如下方式设置 #toggle 的 CSS（调整值以满足您的需要）：

#toggle {
    font-family: segoe ui;
    left: 100px;
    top: -44px;
}

如果您不想走这条路（但您确实应该这样做），则必须编写一个在 window.onresize 上触发的函数，该函数设置#toggle 元素相对于您选择的任何元素的位置。

Since you're using absolute positioning, you don't need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:

<p align="center" class="flip" id="toggle">Send this page to your email.</p>

so that it's the first child of this:

<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">

In the above div (id="map_canvas"), set overflow to "visible". Then set #toggle's CSS as follows (tweak values to suit your needs):

#toggle {
    font-family: segoe ui;
    left: 100px;
    top: -44px;
}

If you don't want to go that route (but you really should), you'd have to write a function that fires on window.onresize which sets the #toggle element's position relative to whatever element of your choosing.

回复收藏 0 原文