javascript - 水平排列生成的 div

Question

我正在创建一个 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 - 它们具有正确的高度、宽度和边框。看起来他们只是为每个人创建一条新线。谁能告诉我为什么？

Answer 1

您为所有 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>