Javascript 水平排列生成的div

我正在创建一个映射生成器，允许用户输入映射中的行数和列数，然后创建该映射（作为div）。除了div之外，所有东西都正常工作，而不是在行和列中，而是在一个大的列中。它确实具有正确数量的平铺（例如，如果输入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);
}

生成的div可以很好地读取CSS-它们具有适当的高度、宽度和边框。似乎他们只是在为每个人创造一条新的生产线。有人能告诉我为什么吗？

让你的div浮动

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

---

你给了你所有的div一个100px的宽度。您在一个div中有div。因此，您需要更改样式以仅针对子对象

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

函数createMap（行、列）{
变量$div=$（''）；
var k=0；
while（k<行）{
对于（i=0；i”）；
k++；
}
$（'body'）.empty（）；
$（'body'）。追加（$div）；
}
createMap（2,3）

div>div{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
}

---

尝试将div浮动到左侧，向我们展示HTML或演示。浮动是不必要的，通常会导致更多的问题。您正在创建不必要的jQuery对象，这使得您的代码效率极低。您应该只使用纯字符串连接，并且只在末尾创建一个jQuery对象，即。e、 ，假设您有一个包含所有div的

grid

string变量，只需执行

$（'body'）.replaceWith（$（''）.append（grid））。请参阅@JoseRuiSantos我还是javascript/jQuery新手，不知道有哪些好的/坏的做法，所以感谢您的评论<代码>内联块和浮动是多余的。他真的只是查看注释并根据注释创建答案吗？你真倒霉，伙计@事实上，达维伯恩斯没有！我以为他缺少了浮动，但我没有阅读JS逻辑，因为这是一个CSS问题。这是一个CSS问题，而不是这个CSS问题。
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: inline-block;
    float: left;
}