HTML div网格-行之间的多余空间 [英] HTML divs grid - unwanted space between rows

问题描述

我正在尝试构建一个div s的简单网格:(在此处进行实时演示)

I'm trying to build a simple grid of divs: (live demo here)

HTML:

<div class="board"></div>

JS:

$(function() {
    var boardHTML = '';

    for (var r = 0; r < 2; r++) {
        var row = '<div class="row">';

        for (var c = 0; c < 5; c++) {
            row += '<div class="cell"></div>';
        }

        row += '</div>';
        boardHTML += row;
    }

    $('.board').append(boardHTML);
});

CSS:

.cell {
    width: 30px;
    height: 30px;
    outline: 1px solid black;
    display: inline-block;
}
.row {
    background-color: red;
}

但是，结果看起来像这样:

But, the result looks like this:

问题:是什么导致行之间出现此间隔?

QUESTION: What causes this space between rows?

一种可能的解决方案是:

One possible solution is:

.row {
    height: 30px;
}

此外，要消除右侧的多余空间，我可以添加:

Also, to get rid of the extra space on the right hand side, I could add:

.board {
    width: 150px; /*   5 * 30px   */
}

但是，我想知道是否有更好的解决方案，不需要以像素为单位设置宽度/高度.

However, I wonder if there is a better solution which doesn't require setting the width/height in pixels.

您还有其他想法吗?

推荐答案

在.cell CSS中写为vertical-align: top;.像这样写

Write like vertical-align: top; in your .cell CSS. Write like

.cell {
    display: inline-block;
    height: 30px;
    outline: 1px solid black;
    vertical-align: top;
    width: 30px;
}

选中此 http://jsfiddle.net/cSWnb/6/

这篇关于HTML div网格-行之间的多余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！