Question

我目前正在制作一个网站，其中输入了'n'个正方形，然后在页面上显示该正方形数量的网格。问题是当浮动div时，在行的末尾留下一个小间隙，使得正方形网格不对称。

JavaScript是设置每个方块大小的代码。 PHP是用户输入框的半伪代码，并回显那些数量的框。

如何让网格看起来居中？我很欣赏这可能很难掌握

<body>
<div class="navbar"></div>
<div class="container">
    <div class="box-container">
        <?php
            $NumberOfBoxes = USER INPUT AMOUNT
            for ($count = 1; $count <= $NumberOfBoxes; $count++) {
                echo "<div class='box'></div>";
            }
        ?>
    </div>
</div>
<script>
    $(window).load(function() {
        var h = $(".container").height();
        var w = $(".container").width();
        if (w > h) {
            var NumberOfBoxes = <?php echo json_encode($NumberOfBoxes); ?>;
            var BoxSize = h * (1/Math.sqrt(NumberOfBoxes));
            $(".box").width(BoxSize);
            $(".box").css({
            "padding-bottom": BoxSize
            });
        } else {
            var NumberOfBoxes = <?php echo json_encode($NumberOfBoxes); ?>;
            var BoxSize = w * (1/Math.sqrt(NumberOfBoxes));
            $(".box").width(BoxSize);
            $(".box").css({
            "padding-bottom": BoxSize
            });
        }
    });
</script>

CSS

    html, body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #d9d9d9;
}

.navbar {
    height: 50px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: black;
}

.container {
    height: Calc(100% - 50px);
    width: 80%;
    padding: 0px;
    margin: auto;
}

.box-container {
    height: 89%;
    width: 100%;
    margin-top: 6%;
}

.box {
    float: left;
    width: 0px;
    padding-bottom: 0px; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
}

Answer 1

.container{
    text-align:center
}
.box{
    display:inline-block
}

这可能只是为你做的伎俩。

如何将这个'x'平方的网格居中？

CSS

1 个答案: