1

我有一个包含两个图像的元素，一个在另一个之上。包含元素向左浮动并排成三个。我使用 jQuery 修复将图像居中到其元素中。我不得不使用 jQuery，因为它是一种响应式设计，所以图像会改变大小。除了在某些移动设备上，这一切都很好。在按下随机元素之前，似乎没有计算图像宽度？我希望这是有道理的。URL 是 mooble.co.uk，它是页面左侧较大的图像。

**编辑

抱歉，我没有说清楚，我使用的解决方案工作正常，但在移动设备上，宽度和左边距似乎不是在加载时计算的？大约 20 秒后，它似乎就位。

编辑**

<div class="g1" id="mass">
<p><span class="highlight"></span></p>
<div id="mass-cont">

<img class="bottom" src="images/mass.png" />
<img class="top" src="images/no-mass.png" />


</div>

</div>

css

#mass{position:relative;}
#mass-cont{}
#mass img{position:absolute;left:50%;}
#mass img{transition: opacity 1s ease-in-out;display:block;}
#mass img.top:hover{opacity:0;}

JS

//Functions
function setImageHeight(){

var imageSize = $('.bottom').height();
$('#mass-cont').height(imageSize);

var imageWidth = $('.bottom').width();
var position = imageWidth / 2;

$('#mass-cont > img').css('margin-left' , '-'+ position + 'px');

}

//Load Document
$(document).ready(function() {

//Set image height

$('.bottom').load(function(){

setImageHeight();

});

$(window).resize(function() {

setImageHeight();


});

});
4

2 回答 2

1

我是根据过去的窗口宽度并设置元素的左边距来完成的。

$(window).resize(function() {
 setPosition();
});

$(document).ready(function () {
 setPosition();
});

function setPosition(){
var WindowWidth = $(window).width();
var BottomWidth = 300; //The width of bottom
Left Position = (WindowWidth - BottomWidth) / 2;
$(".bottom").css("margin-left", BottomWidth + "px");
}
于 2012-05-11T11:12:57.050 回答
0

尝试这个：

left = ($("#mass-cont").width() - $(".bottom").width()) / 2;
$(".bottom").css("left", left)
于 2012-05-11T08:55:59.730 回答