Question

我定位CSS菜单时遇到问题 - .dropdown关注居中图像 - #logo，它必须有绝对位置，我写了一个应该这样做的函数：

$(function() { 
      var $logo = $('#logo');
      var marginRight = ($(window).width() - ($logo.offset().left + $logo.outerWidth()));
      $('.dropdown').css('marginRight', marginRight);
});

它在IE中运行良好，但并不总是在Chrome和Firefox中。为什么？这是网站：

site during production

Answer 1

尝试设置

$('.dropdown').css('right', margright);

Answer 2

尝试包装您的代码：

$('#logo').on('load', function() {
   // you code here
});

因为您在文档就绪回调中编写了代码，但图像尚未加载且不知道其大小。

Answer 3

您没有说明确切位置下拉菜单的位置，但假设您希望它位于徽标下方的中间位置，您可以执行此操作

$(function() { 
    var logo = $('#logo');

    logo.on('load', function() {
        var left = logo.offset().left + logo.outerWidth()/2;
        $('.dropdown').css('left', left);
    });
});

Answer 4

@SvenvandeScheur，感谢您的关注。我找到了解决方案（javascript代码在页面上正常工作），但是对于所有如何使用flexbox来做这件事都很有趣。我希望下拉菜单放在居中图像的右下角

https://jsfiddle.net/1ddk7e5k/

此代码适用于页面：

$( "#logo" ).load(function() { var margright=(($('.centered').width()-$('#logo').width())/2); $('.dropdown').css('marginRight',margright); });

相对于居中元素的定位

4 个答案: