flex布局下用jQuery设置同级元素宽度时取值偏大如何解决

云原生阿岚

2026-10-11

问题解决方法

这个问题一般是四个常见原因导致的：

宽度取值时机不对，window.load需要等所有图片、字体等资源加载完才执行，中间如果发生过重排，拿到的宽度就不是实际渲染的尺寸
页面如果存在多组筛选器，直接用类选择器取.filter-options-title的宽度只会返回第一个匹配元素的尺寸，赋值给所有筛选器的content元素就会出现宽度不匹配的情况
两个元素的box-sizing属性不统一，比如title用border-box，content用content-box，你设置的宽度只会作为content的内容宽度，还要额外叠加它自身的padding、border，总宽度自然偏大
flex容器的动态尺寸分配规则还没生效就取了宽度，拿到的是元素的初始宽度不是flex计算后的最终宽度

修复代码

$(function() {
    if ($(window).width() >= 900) {
        // 逐组处理每个筛选器，避免多组互相干扰
        $('.filter-options').each(function() {
            const $title = $(this).find('.filter-options-title');
            const $content = $(this).find('.filter-options-content');
            // 取title包含padding、border的完整渲染宽度
            const titleFullWidth = $title.outerWidth();
            // 统一box-sizing为border-box，保证设置的width就是元素总宽度
            $content.css({
                boxSizing: 'border-box',
                width: titleFullWidth
            });
        });
    }
});