jquery - 表格单元格列之间的相等内部间隙

Question

我正在使用 savvior.org为图像和其他元素创建基于网格的布局，一切正常，我只是坚持在 .columns 之间添加内部间隙。

目前结果如下:

如您所见，间隙相等，但行内元素的高度不同。

我尝试使用边框，我设法让元素具有相同的高度，但是间隙没有相等的空间...

请注意，gab/padding 需要可调。

我在这里整理了一个 JSFiddle http://jsfiddle.net/6n0wasjf/4/

这是 CSS:

/*GRID SYSTEM =================================================================*/
.grid {
    width: 100%;
  margin-bottom: 10px;
  position: relative;
  display: table;
  table-layout: fixed;
  opacity: 0;
}
.grid .grid { 
    opacity: 1;
} 
.grid:last-of-type {
    margin-bottom: 0;
}

    .grid .column {
      padding: 0 10px;
      display: table-cell;
    }

    .grid .column:first-of-type {
      padding-left: 0;
    }

    .grid .column:last-of-type {
     padding-right: 0;
    }

    /*Columns width settings*/
    .grid .size-1of1 {
      width: 100%
    }
    .grid .size-1of2 {
      width: 50%;
    }
    .grid .size-1of3 {
      width: 33.33%;
    }
    .grid .size-1of4 {
      width: 25%;
    }
    .grid .size-1of5 {
        width: 20%;
    }

Answer 1

问题是由于删除 padding在.grid .column:first-of-type和 .grid .column:last-of-type .这将导致 .column 的宽度差异分区。

而是为 .grid 添加负边距删除左右填充。

.grid {
    ....
   margin-left: -5px;
   margin-right: -5px;
}

请检查 fiddle - http://jsfiddle.net/afelixj/6n0wasjf/5/