表格单元格列

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 div的宽度差异。

而是为.grid添加负余量以删除左右填充。

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

请检查小提琴 - http://jsfiddle.net/afelixj/6n0wasjf/5/