gpt4 book ai didi

jquery - 使
的边框与 .left 位置对齐

转载 作者:太空宇宙 更新时间:2023-11-04 10:12:14 24 4
gpt4 key购买 nike

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

会不会是我的基本html格式造成的

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

其中 main 的位置是 static,container 的位置是 absolute,html 有 margin: 0;关于如何使左侧位置与视觉左边框对齐有什么建议吗?

最佳答案

解决此问题的一种可能方法是计算 .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 函数中再次调用了它:这样我们就同意,如果浏览器窗口最终调整大小,将重新计算值并重新应用(以防万一网站响应并且使用的单位不是绝对的)。

希望有用。

关于jquery - 使 <div> 的边框与 .left 位置对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37512017/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com