个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在容器内创建一个网格，我希望用户引入列数和行数。问题是内容不适合容器，如果用户想要一个高达 64x64 的大网格，它会溢出容器。无论行和列如何，我怎样才能让我的网格适合容器？
我的代码:
const container = document.createElement('div');
container.id = 'container';
container.className = 'mx-auto my-2';
document.body.appendChild(container);
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
container.style.border = '3px solid #0000FF'
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
cell.addEventListener("mouseover", paint);
};
};
function paint(e) {
e.target.style.backgroundColor = 'black';
}
let size = 0;
const start = document.getElementById('start');
start.addEventListener('click', function() {
size = prompt('Please enter the side of the grid(max 64):');
if (size <= 64) {
container.innerHTML = '';
makeRows(size, size);
} else if (size > 64) {
alert('You exceeded the limits. Please Try Again:');
}
});
const reset = document.getElementById('reset');
reset.addEventListener('click', function() {
container.innerHTML = '';
makeRows(size, size);
});:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
overflow: hidden;
height: 450px;
width: 960px;
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1em;
text-align: center;
background-color: gray;
}<body class="bg-secondary">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">Etch-A-Sketch</span>
</nav>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary btn-lg" id="start">START</button>
<button type="button" class="btn btn-primary btn-lg" id="reset">RESET</button>
</div>
<script src="script.js"></script>
</body>最佳答案
只需删除填充:
const container = document.createElement('div');
container.id = 'container';
container.className = 'mx-auto my-2';
document.body.appendChild(container);
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
container.style.border = '3px solid #0000FF'
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
cell.addEventListener("mouseover", paint);
};
};
function paint(e) {
e.target.style.backgroundColor = 'black';
}
let size = 0;
const start = document.getElementById('start');
start.addEventListener('click', function() {
size = prompt('Please enter the side of the grid(max 64):');
if (size <= 64) {
container.innerHTML = '';
makeRows(size, size);
} else if (size > 64) {
alert('You exceeded the limits. Please Try Again:');
}
});
const reset = document.getElementById('reset');
reset.addEventListener('click', function() {
container.innerHTML = '';
makeRows(size, size);
});:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
overflow: hidden;
height: 450px;
width: 960px;
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
text-align: center;
background-color: gray;
}<body class="bg-secondary">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">Etch-A-Sketch</span>
</nav>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary btn-lg" id="start">START</button>
<button type="button" class="btn btn-primary btn-lg" id="reset">RESET</button>
</div>
<script src="script.js"></script>
</body>关于javascript - 无论行数和列数如何，都可以将网格放入 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63102609/
25
4
0
您如何计算Oracle表中的列数？ 最佳答案 SELECT count(*) FROM user_tab_columns WHERE table_name = 'FOO' 应该给你foo中的列数。您可
我有一个宽度为 100% 的 div，里面有大约 10 张图片，所有图片的宽度和大小都不同。我希望能够无缝地将这些图像彼此 float ，我已经做到了，但它们不会在屏幕上拉伸(stretch)，它们都
请看下面的代码，表格应该根据下面selected id选项中选择的输入更改行数，但只读取select id的第一个值，行数不会根据选择，你能指出我代码中的错误吗？ http://jsfiddle.ne
我需要一个可以在 3×3 和 4×4 之间切换的动态 gridlayout。我可以 setRowCount 和 setColumnCount 从 3 到4 但不是从 4 到 3。它会显示以下问题: C
这里有一个没有真正答案的类似问题:CSS columns bug — 5 column count only showing 4 (with images) 我正在使用 column-count 来显
我正在尝试找到一种方法来填充摊销时间表，如下所示。 我目前使用的公式是: =IF($B2=$1:$1,$A2/$C2," ") 但是，这仅填充了第一个点(“起点”)，我想做的是根据摊销期抵消这一点。期
我运行以下代码: import cv2 import numpy as np img_file='pokemon.jpg' img=cv2.imread(img_file) # print tota
我正在使用 asp.net 和 vb。这里我将数据绑定(bind)到Gridview。该数据集有 5 条记录，3 列，并且 gridview 显示 5 条记录，3 列。但 Gridview.colum
我已经为我的数据库苦苦挣扎了一段时间，几乎不可能找到我的老师。我的代码如下: INSERT INTO `database28`.`activity` VALUES ("Stefan", 1.1.2.2
我有一个执行 SQL 命令的 python 脚本，并尝试将所有数据插入表中。问题是我有一个条目列表，例如: "Bob", "bob@gmail.com" "John", "john@gmail.com
有谁知道这是否可以通过 bootstrap mixins 来完成。 列(父级数) 像什么Neat有。 在 Neat the Columns 中，mixins 的工作方式如下 @mixin span-c
我有这样的网址:http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115 你可
使用 Bootstrap 3，我正在寻找一种网格布局，其中列宽在任何屏幕分辨率下都是固定的(比如 200 像素)，但它们的数量取决于屏幕宽度。 换句话说，我知道列的宽度，但我不知道每行有多少列，因为这
public class SmallestColumn2{ public static void main(String[] args){ int [][] smallest
如果我只有 9 列，但我想将它们分散到 100% 的 div。如何做到这一点？ NSW VIC QLD WA SA TAS ACT N
我想在这里更改列的顺序: #container { position: relative; width: 600px; } #column-wrapper { -webkit-
1、df=DataFrame([{‘A':'11','B':'12'},{‘A':'111','B':'121'},{‘A':'1111','B':'1211'}])
我想将csv文件形式的数据导入表中。[使用Oracle SQL Developer]。我有数百个文件，每个文件有大约50列。 从SQL * Loader Wiki（http://www.orafaq.
好吧，这对我来说似乎很基础，尽管我找不到任何关于如何实现它的信息。 假设我有某种 QGridLayout 包含相同大小的小部件。现在我想根据布局大小更新其行数/列数。 因此，例如在相对较宽的屏幕上它看
我在 https://cwiki.apache.org/confluence/display/Hive/Home 中找不到任何记录在案的限制。 我的猜测是行数或列数没有限制。文件大小受文件系统限制。通
我是一名优秀的程序员,十分优秀！