我正在浏览器中制作 eclipse 刻草图。目前，当我输入 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');
}
});
});
});
最佳答案
我想你想阅读更多关于 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>关于javascript - 如何根据我创建的数量让我的 div 填充剩余空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35094552/