2

我有这样的标记

<div>
    <div>hello</div>
    <div>World</div>
</div>

我使用第一个 div 作为右浮动，第二个作为左浮动。

问题是要获得“世界” div 结束角的位置

我像这样使用JS

var left = $('.inner-page-right-content').offset().left;
left = -(900- left);
$('#inner-page-container').css('background-position',left);

该代码适用于 Chrome 和 Safari，但不适用于显示与窗口的实际距离（无浮动）的 Firefox。

任何帮助或见解将不胜感激 图片

4

3 回答 3

2

这会在 Chrome 和 Firefox 中引发相同的结果

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <style type="text/css"> 
         #hello {
            float: right;
            width: 100px;
            background: grey;
            color: white;
            text-align:center;
        }

        #world {
            float: left;
            width: 100px;
            background: grey;
            color: white;
            text-align:center;
        }

        #result {
            clear: both;
        }

        </style>  

        <script type="text/javascript">
            $(document).ready(function() {

                var oWorld = $("#world").get(0);
                var rect = oWorld.getBoundingClientRect();

                $("#result").html("top: "+rect.top+", Right: "+rect.right);
            });
        </script>

    </head>
    <body>
        <div>
            <div id="hello">hello</div>
            <div id="world">World</div>
        </div>
        <div id="result"></div>
    </body>     
</html>
于 2013-09-06T13:41:34.377 回答
1

你可以试试getBoundingClientRect()

// Assuming your 'world' div has an id="world"
var rect = document.getElementBydId('world').getBoundingClientRect();

rect.left // x position of #world relative to viewport
rect.top // y position of #world relative to viewport
rect.width // width of #world, including padding and borders
rect.height // height of #world, including padding and borders
rect.offsetWidth // width of #world - IE8 and below
rect.offsetHeight // height of #world - IE8 and below

重要笔记

  • left 和 top 位置是相对于视口的，这意味着不考虑滚动。添加滚动 x 和 y 值以获得真正的绝对位置。
  • 考虑了 CSS 转换。

查看 MDN 上的文档

于 2013-09-06T13:26:35.850 回答
1

尝试

dom.getBoundingClientRect()

你可以使用这个方法得到一个dom的矩形。它包含相对于浏览器的左上右下位置。

于 2013-09-06T13:26:54.337 回答