Question

我正在创建一个地图生成器，让用户输入地图中的行数和列数，然后创建该地图（作为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);
}

这是我的CSS：

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

生成的div正在读取CSS - 它们具有适当的高度，宽度和边框。看起来他们只是为每个人创造一条新线。谁能告诉我为什么？

Answer 1

你给所有你的div宽度为100px。 div中有div。所以你需要改变你的风格只针对孩子们

您只希望子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>

Answer 2

浮动你的divs

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

排队生成div水平

2 个答案: