Question

我的Jquery程序涉及制作边框以防止div从容器中退出。但是在execution（容器是白框）中，左边框比我的容器的position().left属性更左边，右边框比$(".container").position().left()+$(".container").width()

这可能是由我的基本html格式

引起的

<html>
    <body>
        <div class ="main">
            <div class = "container></div>
        </div>
    </body>
</html>

其中主要位置为static，而容器位置为absolute且html位于margin: 0; 有关如何使左侧位置与可视左边框对齐的任何建议？

Answer 1

解决这个问题的一种可能方法是计算.main div的位置和维度，然后将它们应用到其内容（.container div）。我创建了一个执行这些值的获取和设置的函数。

所以，考虑到这样的结构：

  <div class="main">
    <div class="container">
    </div>
  </div>

我们假设.main是静态定位的，.container必须是绝对定位的;我们只需要使用jQuery .offset()函数来获取.main的位置，并使用.width()和.height()获取其维度。然后我们只需要将.container div设置为确切的值，我们可以使用.css()函数来实现。我将所有内容打包在一个名为adaptToFrame()的函数中：

function adaptToFrame() {  
    /*We get the values*/
    var position_top = $(".main").offset().top;
    var position_left = $(".main").offset().left;  
    var width = $(".main").width();
    var height = $(".main").height(); 

    /*We set the values*/
    $(".container").css({"position": "absolute", "top": position_top, "left": position_left, "width": width, "height": height });   
}

adaptToFrame();

$(window).resize(function() {
    adaptToFrame();
});

除了调用该函数之外，我在$(window).resize函数内再次调用它：这样我们授予它，在最终调整浏览器窗口大小的情况下，将重新计算并重新应用这些值（以防该站点正在使用响应和使用的单位不是绝对的。）

我希望它很有用。

使<div>的边框与.left位置对齐

1 个答案: