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;
}

我的杰斯

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布局的信息。这是一个基本示例，您可以在一行中添加任意数量的元素。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何让我的div填充剩余空间取决于我创建了多少？

1 个答案: