Question

我有一个函数创建一个div网格，当文档加载时（或当用户重置它时）生成并发送到容器div。一切似乎都与我喜欢的方式有关，除了div的每一行之间都有差距。我希望它是一个完美的网格，每个方格相互齐平。我试过修改边框，轮廓，填充等没有成功。我相信必须有一种方法可以使这项工作不那么复杂，而不是我要做到的。 jsfiddle示例：https://jsfiddle.net/psyonix/1g9p59bx/84/

var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var n = 0;
    var squareSize = (area.innerWidth() / numSquares);
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);        
    }

    $('.square')
        .height(squareSize)
        .width(squareSize)

#g_area {
    background-color: #C8C8C8;
    position: relative;
    width: 580px;
    height: 600px;
    border-radius: 5px;
    margin: 0 auto;
    overflow: hidden;
}
.square {
    display: inline-block;
    position: relative;
    background-color: #C8C8C8;
    outline-color: #000000;
    outline-width: 1px;
    outline-style: solid;
}

Answer 1

您只需要从outline-width移除.square，或者为其提供一些2px或3px值。

.square {
    display: inline-block;
    position: relative;
    background-color: #C8C8C8;
    outline-color: #000000;
    outline-width: 3px; //or 2px or just remove it as I have done in my DEMO
    outline-style: solid;
}

<强> DEMO HERE

Answer 2

您在方形元素上使用inline-block，因此方形元素将处于like the words inside a paragraph状态，并将按照句子的行排列。这些行将line-height与正常句子一样，因此一种方法是重置持有这些方字的父级的行高。

#g_area {
    background-color: #C8C8C8;
    position: relative;
    width: 580px;
    height: 600px;
    border-radius: 5px;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0px;
}

通过这种方式，您可以对线条进行处理，因为您不像普通句子那样正在寻找线条。

另一种方法是避免使用inline-block并使用block和float来实现相同目标。块显示不存在元素之间的行高或空格问题。

.square {
    display: inline-block;
    position: relative;
    background-color: #C8C8C8;
    outline-color: #bc0000;
    outline-width: 1px;
    outline-style: solid;
    display:block;
    float:left;
}

如何让动态创建的div与彼此齐平？

2 个答案: