0

我在 div 元素中有两个元素。一个样式为向左浮动，另一个样式为向右浮动。我给了它们负边距，但是当我尝试找到顶部和左侧（使用.position()jQuery 的函数）时，因为我必须对它们应用一些翻译，左侧元素的左侧位置显示不正确。右元素给出正确的顶部和左侧。

这是代码：

HTML

<hmtl>
<head></head>
<body>
    <div class = "rotate">
    <div class = "figure1"></div>
    <div class = "figure2"></div>
    </div>

</body>
</html>

CSS

.rotate{
    width: 300px;
    height: 70px;
    border:2px solid black;
    margin: auto;
}
.figure1{ 
position: relative;    
float: left;
margin-left: -80px;
display: inline-block;    
width: 70px;
 height: 70px;  
 background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;          
);
}
.figure2{
position: relative;
float: right;
display: inline-block;
margin-right: -80px;   
width: 70px;
 height: 70px;
  background:url("http://www.northareadevonfootball.co.uk/Images/football.jpg");
 background-size: 100% 100%;      
}

Javascript (jQuery)

var a = $(".figure1").position();
var b = $(".figure2").position();
console.log(a,b);

Jsfiddle 上的演示。

查看margin-leftfor 类figure1和margin-rightfor 类，请注意，当我们在控制台中figure2看到 的输出时，-80px 的边距反映在其中一个而不是另一个。console.log

4

2 回答 2

1

尝试使用offset()而不是position()：

var a = $(".figure1").offset();
var b = $(".figure2").offset();
console.log(a.top + '|' + a.left + ' ' + b.top + '|' + b.left);

演示。

于 2012-07-24T08:27:22.460 回答
1

尝试offset()代替position()

于 2012-07-24T08:34:22.577 回答