尝试使用 outerWidth() 和 $(window).resize() 水平居中动态宽度元素时的意外行为

Posted 2023-03-05

【中文标题】尝试使用 outerWidth() 和 $(window).resize() 水平居中动态宽度元素时的意外行为

【英文标题】：Unexpected behavior when trying to center element of dynamic width horizontally using outerWidth() and $(window).resize()

【发布时间】：2013-08-08 02:14:09

【问题描述】：

编辑 1（将问题简化为 jsfiddle）：

我删除了原始问题的一些不必要的细节。

我试图在窗口中居中弹出一个弹出窗口。由于它将如何在原始上下文中使用，弹出窗口的宽度将是动态的。它的唯一内容是文本，但不知道该文本有多长。在大多数情况下，它会占一行，但如果文本较长且用户的屏幕分辨率较低，则可能需要占用 2 行，我希望将所有文本保留在屏幕上。 jsfiddle 中的文本是静态的，因此这显然不是导致问题的原因。我只是澄清一下，以防有人想知道为什么我没有尝试为弹出窗口设置宽度。我正在使用 jquery 获取宽度，使用 outerWidth() 和 $(window).resize() 在调整浏览器窗口大小时触发居中功能。

只要弹出窗口的宽度小于包含它的元素，它就可以正常工作。如果弹出窗口足够小以至于文本必须进入两行，我希望弹出窗口只占用其容器的整个宽度。正如您将在下面的视频中看到的那样，如果您对浏览器窗口大小进行较大调整，则并不总是正确报告宽度，这导致元素在左侧有一个空间而不是居中。换句话说，outerWidth() 报告的宽度与浏览器呈现的宽度不同。

观看此视频以了解该问题的演示：http://youtu.be/Tnq6nrrDKvw

我在 Firefox、Chrome、IE、Opera 和 Safari 中都会遇到这种情况。也许这是 jquery 的 outerWidth 函数的问题。或者也许我不明白它应该如何工作。还有其他方法可以完成我想做的事情吗？

这里是javascript，没什么复杂的：

function center_horizontally(id)

    var windowWidth = document.documentElement.clientWidth;
    var popupWidth = $(id).outerWidth();

    var new_left = Math.max(0, windowWidth/2 - popupWidth / 2);

    ...

    $(id).css('left', new_left + 'px');


$(function()
    $(window).resize(function() 
        center_horizontally('#popup');
    );

    center_horizontally('#popup');
);

唯一重要的 css 是弹出窗口具有位置：固定且没有设置宽度或高度。如果我设置弹出窗口的宽度，它会像应有的那样沿左侧粘贴，但文本会超出右边界。我想保留屏幕上的所有文本并让它占据整个宽度并在需要时将一些文本跳到下一行。当宽度变得足够低时，我只想让通知占据整个查看区域的宽度。

http://jsfiddle.net/dnag/qHjVG/5/

编辑2（解决方案）：

感谢我的帮助，我最终使用了这个解决方案。

http://jsfiddle.net/dnag/qHjVG/44/

弹出窗口没有重新定位弹出窗口，而是保留了自动宽度并显示：inline-block。它们包含在具有固定位置的 div 中。当窗口调整大小时，包含的 div 会调整大小并重新定位。当窗口缩小时，您可以通过更改函数中的数字来指定在弹出窗口之外需要多少水平空间。可能有办法只使用 css 来做到这一点，但我很高兴目前有一些功能性的东西。

【问题讨论】：

+1 获取问题的视频描述：]

你能发布文本气泡的样式吗？

我不知道这是否是原因，但也许可以尝试：var timer; $(window).resize(function() clearTimeout(timer); timer = setTimeout(function() center_horizontally('#subtitle_notice'); , 100); /* your other resize code */ ); 这只会在调整大小停止后触发。我不确定它是否会有所帮助，但值得一试。

我们需要更多关于 #subtitle_notice 的信息。它是绝对定位还是相对定位？它有利润吗？请发布更多代码（CSS）或小提琴。

感谢您的快速回复。我用 CSS 细节编辑了我的帖子。今晚晚些时候我得试试计时器，因为我要离开几个小时。如果这不起作用，我将制作一个简化的 jsfiddle。

【参考方案1】：

所以我可能会误解，但你根本不需要 JS 来实现这种效果。这似乎是一个用 JS-hammer 而不是使用一些 CSS-fu 来击败 sh!t 的案例。我在下面的 html 中包含了两个示例，一个仅包含一行文本，一个包含更多（当我将其插入小提琴时为 3 行）

我没有一个该死的小提琴帐户，所以这里是你小提琴的相关部分：

1) 不需要 JS。 （尤其是像 outerwidth 等可能导致不必要的回流/重绘的东西。

2) HTML

<div id="popup">
    This is some sample text, just a little bit of sample text.
</div>
<div id="popup" style="top:120px;">
    This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample 
</div>

3) CSS

#popup 
  background: #FFF;
  position: fixed;
  top: 50px;
  left: 0;
  border: 1px solid #000;
  box-shadow: 0 0 3px #CCC;
  padding: 10px; 
  width:auto;
  max-width:100%;

--EDIT-- ALT 版本居中，如问题顶部所示：

HTML

<div id="popupWrapper">
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit 
    </div>
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit of s little bit of s little bit of s
    </div>
    <div id="popup" style="top:120px;">
        This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample 
    </div>
</div>

CSS

#popupWrapper 
    width: 100%;
    text-align:center;
    position:absolute;


#popup 
    background: #FFF;
    top: 50px;
    border: 1px solid #000;
    box-shadow: 0 0 3px #CCC;
    padding: 10px;
    max-width:100%;
    display: inline-block;

【讨论】：

那是假设你发的这行：“它应该像它一样沿着左侧粘着”推断你希望它正常地粘在屏幕的左侧......我只是重新- 阅读您的消息并尝试水平居中以查看您的意思。

是的，很抱歉造成混乱。除非我遗漏了一些明显的东西，否则当宽度设置为 auto 时，不可能将其放置在中间并在两侧留有空间。我知道如何居中的唯一方法是使用自动边距，并且需要设置宽度。我也许可以确定空间的宽度何时太小并将css更改为宽度：100％。但如果可能的话，我将不得不做一些更疯狂的 js 来实现这一点。

多哈。我一直使用 inline-block （可能太多了），我从来没有想过在这里使用它。谢谢您的帮助！ 100% 的宽度使右侧与边框和诸如此类的东西一起离开屏幕一点点，但我可以解决这个问题。

没有问题，如果您将该元素设置为 box-sizing:border-box; 则可以解决边框和宽度问题祝你好运。

我什至不知道该财产存在，很高兴知道。就我而言，我最终认为盒子周围的空间看起来更好。我最终只是再次使用javascript。它完全按照我的意愿工作，并且我在上面包含了一个新的 jsfiddle。也许只用 css 也可以，但在几次尝试失败后我放弃了。