我正在使用 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%;
}
最佳答案
问题是由于删除 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/
关于jquery - 表格单元格列之间的相等内部间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30640508/