0

首先，让我给你一点背景。我正在使用 % 创建一个响应页面来定位我的 div。它允许用户随意拖放项目。当用户将对象放置在页面边缘附近时，就会出现问题。当您调整浏览器大小时，图像开始离开页面并被切断。

    #div1 
    {
    overflow: hidden; 
    right: <?php variable>;
    bottom: <?php variable>;
    }

    #div2 
    {
    overflow: hidden; 
    left: <?php variable>;
    top: <?php variable>;
    }

我想尝试做的是允许百分比控制直到页面边缘的位置。然后我想将变量硬编码为 10px 之类的东西，这样它就永远不会离开页面。

我想在javascript（if语句（'s））中这样做，但认为也许有一种更简单的方法（css属性）。任何帮助或建议将不胜感激。

谢谢，

抢

4

1 回答 1

0

如果您要使用 javascript，您需要有一个单独的函数来触发浏览器调整大小：

window.onresize = function(event) {
    //your code here
}

或者如果你使用流行的 jQuery

$(window).resize(function(){
    //your code here
});

是一样的。

如果您想使用 css 对其进行硬编码，请使用 @media 查询：

@media(max-width:767px) { /*or whatever you want to use to trigger the css that will be used after browser size fits your problem */
    .myImage {left:10px;top:10px;}
}

有关您可以使用 @media 的更多信息，请访问 http://www.w3.org/TR/css3-mediaqueries/

如果您问我，我认为您将使用 javascript 完成更可靠的解决方案，并且由于我怀疑您正在使用 js 来拖动元素，因此也可以使用它来调整大小和重新定位。

于 2013-06-14T14:51:04.520 回答