如何根據創建的div填充div剩余空間？

Question

我正在瀏覽器中進行蝕刻。 目前，當我輸入7200的大小時，它可以正常工作，但是我希望能夠輸入一個數字，並根據它進行網格化。 假設某人輸入16時會創建16x16或100、100x100等。此外，我如何讓我的div對此做出動態響應，以便無論我有多少div，它都會填滿整個屏幕？

我的HTML：

<DOCTYPE html>
<html>
<head>
    <title>Project</title>
    <script type="text/javascript" src="JS/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="JS/etch.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="wrapper">
        <div class="button">
            <button type="button" id="clear-button">Clear Board</button>
        </div>
        <div id="game"></div>
    </div>
</body>
</html>

我的CSS：

#wrapper {
    width: 1000px;
    height: 760px;
    background-color: gray;
}

.grid {
    width: 10px;
    height: 10px;
    float: left;
}

.draw {
    background-color: black;
}

.button {
    width: 1000px;
    height: 40px;
}

#clear-button {
    margin: auto;
    display: block;
}

我的.Js

var count = 0;

$(document).ready(function() {

    while(count < 7200){
        $('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
        count++;
    };

    $('.grid').on({
        mouseenter: function () {
            $(this).addClass('draw');
        },
        mouseleave: function () {
            $(this).addClass('draw');
        }
    });

    $('button').click(function() {
        $('#game').empty();
        count = 0;

        var size = prompt("What size would you like the new etch-a-sketch to be?");

        while(count < size){
            $('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
            count++;
        };
        $('.grid').on({
            mouseenter: function () {
                $(this).addClass('draw');
            },
            mouseleave: function () {
                $(this).addClass('draw');
            }
        });
    });
});

Answer 1

我想您想了解有關Flexbox布局的更多信息。 這是一個基本示例，您可以在一行中添加盡可能多的元素。

 .flex-container { display: -webkit-flex; display: flex; width: 100%; height: 250px; background-color: lightgrey; } .flex-item { -webkit-flex: 1; flex: 1; margin: 10px; background: blue; }

 <div class="flex-container"> <div class="flex-item item1">flex item 1</div> <div class="flex-item item2">flex item 2</div> <div class="flex-item item3">flex item 3</div> </div>

如何根據創建的div填充div剩余空間？

問題描述

1 個解決方案

解決方案1
2 2016-01-29 23:18:17

如何根據創建的div填充div剩余空間？

問題描述

1 個解決方案

解決方案1 2 2016-01-29 23:18:17

解決方案1
2 2016-01-29 23:18:17