gpt4 book ai didi

javascript - 如何设置 css width 或 left 属性以获得像素完美的结果?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:24:51 30 4
gpt4 key购买 nike

我刚开始尝试使用 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>

white line in the middle

最佳答案

这是处理图形和 float 时常见的舍入问题。您或多或少只需要在除法时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';

请注意,您将在网格的一个边缘留下空白。这是因为窗口的大小不是单元格大小的完美倍数。您必须在保持单元格大小不变(如上)或具有不同大小的单元格之间做出选择,这会需要更多的工作。

关于javascript - 如何设置 css width 或 left 属性以获得像素完美的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48955500/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com