Question

输入字段减小/增大了网格大小，但是网格的行和列从不均匀。

JS小提琴： https://jsfiddle.net/4mph9ewk/

这是我尝试的方法： 1.我查看了我的CSS文件，并查看了第31-44行。我使用flexbox制作了网格，所以我认为向左浮动会更有效。

在我的js文件中，main（）函数中嵌套了for循环，因此在此之前，我使用了一个for循环并将boxSide平方（将boxSide设置为等于从输入字段控制的参数）。

CSS

 .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .title header h1 {
        margin: 1em 0em 1em 0;
    }

    .containerGrid {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        margin-bottom: 5em;

    }

    .cell {
        height: 15px;
        width: 15px;
        border-radius: 3px;
        border: 0.5px solid var(--black-color);
    }

JavaScript

            function reset(length) {
        boxSide = length;
        main();
        $(".cell").css({
                        "opacity": "0.1",
                        "border": "0.5px solid black",
                        "backgroundColor": "transparent"});
    }

    /*-- ------------------------- 
            Creates the Grid 
    ------------------------------*/
    function main() {
        $($containerGrid).empty();
        for (let row = 1; row < boxSide; row++) {
            for (let column = 0; column < boxSide; column++) {
                $(".cell").css("height", `${100 / boxSide}%`);
                $(".cell").css("width", `${100 / boxSide}%`);
                createCell()
            }
        }
    }

    function createCell() {
        const $cell = $('<div class="cell"></div>');
        $cell.css("opacity", "0.1");
        $containerGrid.append($cell);
    }

    main();

如果您在输入字段中输入3，您会期望得到3 x 3的井，结果是3 x 2，底部的行，最后一列有一个小正方形，这是完全错误的。

Answer 1

好的，进行了3次更改：

您正在运行从1到框大小的行循环，将行循环从0-boxsize进行操作，否则您将少得到一行
将单元格的公式从％更改为px，然后将您的容器网格按框大小划分，并删除1 px的空白

$(".cell").css("height", `${(300 / boxSide)-1}px`);
$(".cell").css("width", `${(300 / boxSide)-1}px`);

最后，将您的单元CSS移出循环，并在main（）函数中一次对所有单元运行一次。

工作演示

JS FIDDLE

jQuery-网格返回的行和列不均匀

1 个答案: