IE ширин известков выпуск

Question

Вот скрипка: https://jsfiddle.net/ftqft005/1/

В принципе, я хочу, чтобы каждый красный ящик «материал» для выравнивания рядом друг с другом, два в ряд, с совершенно равными отступами слева и справа. Итак, «левый материал» идет слева, «правый материал» идет по правому краю. Я знаю, если я изменю ширину .product-link от -7.5px до -15px, они идут рядом друг с другом, но тогда два поля не идеально выровнены по центру.

Так в основном, если я это изменить:

.product-link { 
float: left; 
background-color: red; 
width: calc(99.99% * 1/2 - 7.5px); 
width: calc(99.99% * 1/2 - 0.46875rem); 
} 

к этому:

.product-link { 
float: left; 
background-color: red; 
width: calc(99.99% * 1/2 - 15px); 
width: calc(99.99% * 1/2 - 0.9375rem); 
} 

Это вроде работает, но это не идеально выровнены, как это в Chrome и FireFox на сайте. У него немного больше места, чем справа.

Я не уверен, почему он даже не работает в скрипке, потому что тот же код работает для меня в Chrome и FireFox, но ломается в IE и Edge.

Answer 1

Я думаю, что я получил это: https://jsfiddle.net/ftqft005/4/

В принципе, я пытался подражать этот плагин: https://github.com/peterramsing/lost

Вот код этого человека, что я смоделировал мину после. Он должен дать симметричную трехпозиционную сетку. Я не уверен, что требуется ясность.

div { 
    width: calc(99.9% * 1/3 - (30px - 30px * 1/3)); 
} 
div:nth-child(1n) { 
    float: left; 
    margin-right: 30px; 
    clear: none; 
} 
div:last-child { 
    margin-right: 0; 
} 
div:nth-child(3n) { 
    margin-right: 0; 
    float: right; 
} 
div:nth-child(3n + 1) { 
    clear: both; 
}