Question

编辑：reading关于子像素渲染的更多信息，我了解到导致十进制或部分像素值的CSS值不是“浏览器友好的”。因此，值应设置为小数位！

我通过对所有子元素（.project）的宽度求和来计算父元素（.container）的宽度。到目前为止，我试过这个，但它不起作用。有人可以帮帮我吗？

例如：当我有五个子元素时，每个子元素的宽度为363.667px，我希望宽度为364px。

HTML标记

<div class="container">
    <ul id="projects">
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="clear"></li>
    </ul>
</div>

的jQuery

$(window).on( "resize", function () {
    var width = ( $(window).width() / 3 );
    $(".project").css({ width : width.toFixed() });

    var sum = 0;
    $("#projects .project").each( function(){ sum += $(this).width(); });
    $(".container").width( sum );
}).resize();

Answer 1

你可以替换：

$(window).width(), $(this).width(),

使用硬代码值并重做测试以查看这是否是您期望的值，

无论CSS box-sizing属性的值如何，

.width()将始终返回内容宽度。从jQuery 1.8开始，这可能需要检索CSS宽度加上box-sizing属性，然后在元素具有box-sizing: border-box时减去每个元素上的任何潜在边框和填充。为避免此罚款，请使用.css("width")而不是.width()。

设定值显示两位小数

1 个答案: