如何设置CSS的width或left属性以获得像素完美的效果？

Question

我刚刚开始尝试使用JS / CSS，但遇到了这个问题，但在论坛上找不到答案。

我不知道如何摆脱窗口中间的白线（附有图片）。 它并非始终出现，而是以一定比例显示。

非常感谢

<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .d {
        position: fixed;
        margin: 0;
        padding: 0;
        border: 0px;

        background-color: #A1F1F1;
        text-align: center;


    }
</style>
</head>
<body>

    <script>

    var numOfDivsHor = 10;
    var numOfDivsVer = 10;

    function setCubeSize() {

        document.body.innerHTML = '';

        var w = document.body.clientWidth;
        var h = document.body.clientHeight;
        var fs = h/numOfDivsVer/3;

        for (i=0; i < numOfDivsHor; i++) {
            for (j=0; j < numOfDivsVer; j++) {
                var d = document.createElement('div');
                document.getElementsByTagName('body')[0].appendChild(d);

                d.id = i + '' + j;
                d.className = 'd';
                d.innerHTML = i + '' + j;

                setLayout(i + '' + j, w, h, fs);

                d.style.left = j * w/numOfDivsHor + 'px';
                d.style.top = i * h/numOfDivsVer + 'px';
                d.style.backgroundColor = 'rgb(120, ' + Math.round(i * 25.5) + ', ' + Math.round(j * 25.5) + ')';
            }

        }

    }

    function setLayout(divId, w, h, fs) {
        var d = document.getElementById(divId);
        d.style.width = 100/numOfDivsHor + '%';
        d.style.height = 100/numOfDivsVer + '%';
        d.style.fontSize = fs + 'px';
        d.style.paddingTop = (h/numOfDivsVer - fs)/2 + 'px';

    }

    document.addEventListener('DOMContentLoaded', function() {;
        setCubeSize();
    });

    window.addEventListener('resize', function() {
        setCubeSize();
    });

    </script>
</body>
</html>

中间的白线

Answer 1

这是一个舍入问题，在处理图形和浮点数时很常见。 当您除法时，您或多或少只需要floor值。

具体来说，此更改可解决您发布的代码中的问题。 更改：

d.style.left = j * w/numOfDivsHor + 'px';
d.style.top = i * h/numOfDivsVer + 'px';

至：

d.style.left = j * Math.floor(w/numOfDivsHor) + 'px';
d.style.top = i * Math.floor(h/numOfDivsVer) + 'px';

请注意，您将在网格的一侧留有空白。 这是因为窗口的大小不是单元格大小的完美倍数。 您必须选择保持像上面一样的像元大小，或者选择不同的像元大小，这将需要更多的工作。

如何设置CSS的width或left属性以获得像素完美的效果？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-23 23:27:49

如何设置CSS的width或left属性以获得像素完美的效果？

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-23 23:27:49

解决方案1
1 已采纳 2018-02-23 23:27:49