gpt4 book ai didi

javascript - 水平排列生成的 div

转载 作者:行者123 更新时间:2023-12-02 16:16:16 26 4
gpt4 key购买 nike

我正在创建一个 map 生成器,它允许用户输入 map 中的行数和列数,然后创建该 map (作为 div)。一切正常,除了 div,它不是在行和列中,而是在一个大列中。它确实具有正确数量的图 block (例如,如果您输入 3 和 2,则它有 6 个;如果您输入 5 和 5,则它有 25 个)。更有趣的是,如果我在常规 html 文件中输入 div,它们会像预期的那样排列起来。

这是我的 JavaScript 函数:

 function createMap(rows, columns) {
var $div = $('<div></div>');
var k = 0;
while (k < rows) {
for (i = 0; i < columns; i++) {
$div.append('<div></div>');
}

$div.append('<br>');
k++;
}
$('body').empty();
$('body').append($div);
}

这是我的 CSS:

div {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}

生成的 div 可以很好地读取 CSS - 它们具有正确的高度、宽度和边框。看起来他们只是为每个人创建一条新线。谁能告诉我为什么?

最佳答案

您为所有 div 设置了 100 像素的宽度。你的div中有div。因此,您需要更改样式以仅针对 child

您只希望子 div 的宽度为 100px。

 function createMap(rows, columns) {
var $div = $('<div></div>');
var k = 0;
while (k < rows) {
for (i = 0; i < columns; i++) {
$div.append('<div></div>');
}

$div.append('<br>');
k++;
}
$('body').empty();
$('body').append($div);
}

createMap(2,3)
div > div {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

关于javascript - 水平排列生成的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29564476/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com