table 单元格列之间的相等内部间隙

Question

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

目前结果如下：

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

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

请注意，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

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

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

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

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

table 单元格列之间的相等内部间隙

Equal inner gaps between table-cell columns

html

css

grid

jquery