我在 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);
查看margin-left
for 类figure1
和margin-right
for 类,请注意,当我们在控制台中figure2
看到 的输出时,-80px 的边距反映在其中一个而不是另一个。console.log