如何防止元素使用DOM包装

Question

我似乎无法阻止这些块的包装。对于小于50的输入，网格似乎工作得很好。

这是我的HTML，但没有太多，甚至尝试了空白属性，内联。CSS，我已经做了一个父div，它似乎为颜色工作，但不关闭换行。

我怎样才能使行框继续?

输入图片描述

let makeGrid = function(numberOfRows) {
let y = 0;
let x = 0;
while (y < numberOfRows) {
x = 0;
let makeBox = function(_parentBox, _sizeOfBox) {
let box = document.createElement('div');
document.body.appendChild(box);
box.style.width = '28px';
box.style.height = '28px';
box.style.border = '1px solid white';
box.style.display = 'inline-block';
return box;
};
let makeRowBox = function(parentBox) {
let box = document.createElement('div');
parentBox.appendChild(box);
//box.style.border = '1px solid black';
return box;
};
rowBox = makeRowBox(document.body);
while (x < numberOfRows) {
makeBox(rowBox, 400);
x = x + 1;
}
y = y + 1;
}
};
makeGrid(50);

div {
background-color: rgb(68, 157, 230);
white-space: nowrap;
overflow: hidden;
}
div>div {
display: inline-block;
border: 2px solid white;
border: '1px solid black';
margin-right: 4px;
}

<div style="white-space: nowrap;"></div>

Answer 1

您可以使用display: inline-flex为boxRows设置样式，这样行将扩展以适合其内容。

我删除了所有在javascript中设置的内联CSS。相反，我给这些盒子添加了一个类。

您还将所有蓝色框添加到body而不是.row(rowBox)。

我需要float和clear的组合，使更小的网格行分隔。

let makeGrid = function(numberOfRows) {
let y = 0;
let x = 0;
while (y < numberOfRows) {
x = 0;
let makeBox = function(_parentBox) {
let box = document.createElement('div');
box.classList.add("box");
//document.body.appendChild(box);
_parentBox.appendChild(box); /* added */

//return box;
};
let makeRowBox = function(parentBox) {
let box = document.createElement('div');
box.classList.add("row");

parentBox.appendChild(box);

return box;
};
rowBox = makeRowBox(document.body);
while (x < numberOfRows) {
makeBox(rowBox, 400);
x = x + 1;
}
y = y + 1;
}
};
makeGrid(30);

.row {
display: inline-flex;
border: 1px solid black;
clear: both;
float: left;
}
.box {
--box-spacing: 2px;
width: 28px;
height: 28px;
background-color: rgb(68, 157, 230);
border: var(--box-spacing) solid white;
flex-basis: 100%;
}