故意边框或填充在响应式平铺视图的中途重叠

Question

我正在使用响应式布局，其中容器具有任意数量的“平铺”，可根据使用媒体查询的屏幕尺寸自动调整基于百分比的宽度。

每个瓷砖都有一个10px的边框，我正在寻找一种可靠的方法来确保总是有10px的边框。如果我将边框设置为10px，那么相邻的瓷砖之间最终会有20px。如果我看到它5px，边缘瓷砖最终具有比其他边缘更薄的边缘，等等。

什么是一种很好的方法来设置瓷砖的边框重叠，而无需使用JavaScript不断调整边缘瓷砖？

注意：我使用了一种技术，使用width: %宽度和padding-bottom: %瓷砖的高度。这是一种可行的技术，因为填充底部基于宽度。如果你看到相同的价值，它将是完美的方形。

Answer 1

答案是以下几点：

ul#container{ 
    border: 5px solid white; /*Half border*/ 
} 

ul#container li.tile { 
    outline: 10px solid white; /*Full border*/ 
    outline-offset: -5px solid white; /*Negative Half border*/ 
} 

我发现，在我的情况下工作好一点的另一种方式（决定用砖响应isotope.js）是以下几点：

li.tile { 
    border: 10px solid white; 
    margin-right: -10px; 
    margin-bottom: -10px; 
}