jquery - Equal inner gaps between table-cell columns -
i using savvior.org create grid based layout images , other elements, works fine, stuck adding inner gaps between .columns
.
the outcome follows:
as can see gap equal height of elements within row isn't.
i tried use borders, manged elements same height gaps didn't have equal space...
note, gab/padding need adjustable.
i have put jsfiddle here http://jsfiddle.net/6n0wasjf/4/
here 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%; }
issue due removing padding
in .grid .column:first-of-type
, .grid .column:last-of-type
. cause width difference .column
divs.
instead add negative margin .grid
remove left , right padding.
.grid { .... margin-left: -5px; margin-right: -5px; }
please check fiddle - http://jsfiddle.net/afelixj/6n0wasjf/5/
Comments
Post a Comment