0

div 要素に 2 つの要素があります。1 つは左にフロートするスタイルで、もう 1 つは右にフロートするスタイルです。私はそれらに負のマージンを与えましたが、それらに何らかの翻訳を適用する必要があるため、(jQuery の関数を使用して) 上と左を見つけようとすると.position()、左要素の左位置が正しく表示されません。右の要素は正しい上と左を与えています。

コードは次のとおりです。

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 the クラスfigure1とmargin-rightfor クラスを見て、コンソールでfigure2の出力を見ると、-80px のマージンが一方に反映されているが、他方には反映されていないことに注意してください。console.log

4

2 に答える 2

1

offset()代わりに試してくださいposition()

于 2012-07-24T08:34:22.577 に答える
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 に答える