jquery - CSS 图像放置方式取决于屏幕分辨率

Question

如果您导航到 http://magee.darkslidedesign.com您将在 jQuery Slides 的主页上看到图像。在幻灯片的两侧，有一个“上一个”和“下一个”按钮。

我将这些图像放在以下 CSS 中的特定位置...

#slides .next,#slides .prev {
    position:absolute;
    margin-top: -215px;
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    margin-left: 827px;
}

如果一个人的分辨率较低或较高，我需要一些帮助来找出使这些箭头保持在 1600x900 分辨率下相同位置的最佳方法。

帮忙吗？

Answer 1

嗯...布局有点古怪...您可以做的一件事是删除 .prev 上的 margin-left: 100px;，删除 margin-left: 827px 在 .next 上，添加 right:0px; 到 .next，最后添加 position:relative 到包含幻灯片 div 的 60% 宽的容器。您可能还想将 min-width: 750px; 放在相同的 60% 宽的 div 上。

如果您总是希望它们保持在同一位置，请将 60% 宽的 div 设置为 800 像素左右的固定宽度 (width:800px)。