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;
}

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

1 个答案: