css - 响应式平铺 View 的有意边框或填充中途重叠

Question

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

每个图 block 都有一个 10 像素的边框，我正在寻找一种可靠的方法来确保始终有 10 像素的边框。如果我将边框设置为 10px，那么相邻的图 block 最终会在它们之间有 20px。如果我看到它为 5px，则边缘图 block 的边框最终会比其他部分更细，等等。

有什么好的方法可以设置 tile 的样式以使边框中途重叠而无需使用 javascript 不断调整边缘 tiles？

注意:我使用了一种技术，使用 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 作为响应式图 block )如下:

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